首页 > > 网页制作 > Javascript >

[js高手之路]深入浅出webpack教程系列8-(postcss…

2018-06-24 00:12:15来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

[js高手之路]深入浅出webpack教程系列索引目录：

  • [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
  • [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
  • [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
  • [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
  • [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
  • [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
  • [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
  • [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
  • [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

我们接着上文，那么在上篇文章的最后，写到了css-loader的用法，如果你用心发现，就能看到我在style.css样式文件中写了一个这样的样式：

div {
transition: all ease 1s;
}
一、这是一个css3的过渡样式，我们知道，写css3的时候，需要加上浏览器前缀. 那么我们着这里就需要安装postcss-loader和autoprefixer插件
安装postcss-loader: npm install postcss-loader --save-dev
安装autoprefixer: npm install autoprefixer --save-dev
 
在demo3目录下面新建一个postcss.config.js，代码如下：
1 module.exports = {
2     plugins : [
3         require('autoprefixer')({
4             browsers : ['last 5 versions']
5         })
6     ]
7 }

意思是在postcss-loader中引入autoprefixer插件

修改webpack.config.js中css loader部分的配置:

 1 var htmlWebpackPlugin = require('html-webpack-plugin');
 2 let path = require('path');
 3 module.exports = {
 4     entry: './src/main.js',
 5     output: {
 6         path: __dirname + '/dist',
 7         filename: 'js/[name].bundle.js',
 8     },
 9     plugins: [
10         new htmlWebpackPlugin({
11             filename: 'index.html',
12             template: 'index.html',
13             inject: true
14         })
15     ],
16     module: {
17         rules: [
18             {
19                 test: /\.js$/,
20                 exclude: /(node_modules)/,
21                 include: [
22                     path.resolve(__dirname, "src"),
23                 ],
24                 use: {
25                     loader: 'babel-loader',
26                     options: {
27                         presets: ['env']
28                     }
29                 }
30             },
31             {
32                 test: /\.css$/,
33                 exclude: /(node_modules)/,
34                 use: [ 
35                     'style-loader', {
36                         loader : 'css-loader',
37                         options : {
38                             importLoaders : 1
39                         },
40                     },
41                     'postcss-loader'
42                 ]
43             }
44         ]
45     }
46 }

执行webpack打包，生成之后的css文件，就自动补充css3前缀了:

 

二、安装less-loader插件

如果我们在modal.js中直接引入modal.less，然后webpack打包，这样会报错

1 import './modal.less';
2 let modal = function(){
3     return {
4         'component-name' : 'modal'
5     }
6 }
7 export default modal;

报错提示需要一个loader来处理， 我们可以安装less-loader了:

安装: npm install --save-dev less-loader less

安装完成之后，配置webpack.config.js

 1 var htmlWebpackPlugin = require('html-webpack-plugin');
 2 let path = require('path');
 3 module.exports = {
 4     entry: './src/main.js',
 5     output: {
 6         path: __dirname + '/dist',
 7         filename: 'js/[name].bundle.js',
 8     },
 9     plugins: [
10         new htmlWebpackPlugin({
11             filename: 'index.html',
12             template: 'index.html',
13             inject: true
14         })
15     ],
16     module: {
17         rules: [
18             {
19                 test: /\.js$/,
20                 exclude: /(node_modules)/,
21                 include: [
22                     path.resolve(__dirname, "src"),
23                 ],
24                 use: {
25                     loader: 'babel-loader',
26                     options: {
27                         presets: ['env']
28                     }
29                 }
30             },
31             {
32                 test: /\.css$/,
33                 exclude: /(node_modules)/,
34                 use: [ 
35                     'style-loader', {
36                         loader : 'css-loader',
37                         options : {
38                             importLoaders : 1
39                         },
40                     },
41                     'postcss-loader'
42                 ]
43             },
44             {
45                 test: /\.less$/,
46                 use: [
47                     {
48                         loader: "style-loader"
49                     }, {
50                         loader: "css-loader"
51                     }, {
52                         loader: "less-loader"
53                     }
54                 ]
55             }
56         ]
57     }
58 }

当碰到less文件时，交给less-loader处理，然后交给css-loader处理，最后交由style-loader处理，然后执行webpack打包，modal.less文件中样式就被嵌入进来了

三、安装html-loader

安装命令: npm install html-loader --save-dev

modal.js文件引入modal.html

1 import './modal.less';
2 import tpl from './modal.html';
3 let modal = function(){
4     return {
5         'component-name' : 'modal',
6         'tpl' : tpl
7     }
8 }
9 export default modal;

main.js对demo3目录下的index.html文件插入模板(modal.html)

1 import modal from './components/modal.js';
2 import './css/style.css';
3 let App = function(){
4     var oApp = document.querySelector("#app");
5     var oModal = new modal();
6     oApp.innerHTML = oModal.tpl;
7 }
8 new App();

 

demo3目录下的index.html文件，需要添加个div, id为app

webpack.config.js增加一项html-loader的配置

 1 var htmlWebpackPlugin = require('html-webpack-plugin');
 2 let path = require('path');
 3 module.exports = {
 4     entry: './src/main.js',
 5     output: {
 6         path: __dirname + '/dist',
 7         filename: 'js/[name].bundle.js',
 8     },
 9     plugins: [
10         new htmlWebpackPlugin({
11             filename: 'index.html',
12             template: 'index.html',
13             inject: true
14         })
15     ],
16     module: {
17         rules: [
18             {
19                 test: /\.js$/,
20                 exclude: /(node_modules)/,
21                 include: [
22                     path.resolve(__dirname, "src"),
23                 ],
24                 use: {
25                     loader: 'babel-loader',
26                     options: {
27                         presets: ['env']
28                     }
29                 }
30             },
31             {
32                 test: /\.css$/,
33                 exclude: /(node_modules)/,
34                 use: [ 
35                     'style-loader', {
36                         loader : 'css-loader',
37                         options : {
38                             importLoaders : 1
39                         },
40                     },
41                     'postcss-loader'
42                 ]
43             },
44             {
45                 test: /\.less$/,
46                 use: [
47                     {
48                         loader: "style-loader"
49                     }, {
50                         loader: "css-loader"
51                     }, {
52                         loader: "less-loader"
53                     }
54                 ]
55             },
56             {
57                 test: /\.(html)$/,
58                 use: {
59                     loader: 'html-loader',
60                 }
61             }
62         ]
63     }
64 }

然后执行webpack打包命令,就能看到modal.html被插入到id为app的div元素内了

 

四、修改模板后缀，为模板赋值

安装ejs-loader: npm install ejs-loader --save-dev

在components目录下新建一个文件（modal.ejs）:

1 <div class="modal">
2     <div>这个组件的名字是:<%= name %></div>
3     <% for( var i = 0; i < arr.length; i++ ){ %>
4         <%= arr[i]%>
5     <% } %>
6 </div>

modal.js引入ejs模板

 1 import './modal.less';
 2 // import tpl from './modal.html';
 3 import tpl from './modal.ejs';
 4 let modal = function(){
 5     return {
 6         'component-name' : 'modal',
 7         'tpl' : tpl
 8     }
 9 }
10 export default modal;

main.js为ejs模板分配数据

 1 import modal from './components/modal.js';
 2 import './css/style.css';
 3 let App = function(){
 4     var oApp = document.querySelector("#app");
 5     var oModal = new modal();
 6     // oApp.innerHTML = oModal.tpl;
 7     oApp.innerHTML = oModal.tpl({
 8         name : 'ghostwu',
 9         arr : [ 'ghostwu', '王朝', '马汉' ],
10     });
11 }
12 new App();

webpack.config.js添加ejs-loader的支持:

 1 var htmlWebpackPlugin = require('html-webpack-plugin');
 2 let path = require('path');
 3 module.exports = {
 4     entry: './src/main.js',
 5     output: {
 6         path: __dirname + '/dist',
 7         filename: 'js/[name].bundle.js',
 8     },
 9     plugins: [
10         new htmlWebpackPlugin({
11             filename: 'index.html',
12             template: 'index.html',
13             inject: true
14         })
15     ],
16     module: {
17         rules: [
18             {
19                 test: /\.js$/,
20                 exclude: /(node_modules)/,
21                 include: [
22                     path.resolve(__dirname, "src"),
23                 ],
24                 use: {
25                     loader: 'babel-loader',
26                     options: {
27                         presets: ['env']
28                     }
29                 }
30             },
31             {
32                 test: /\.css$/,
33                 exclude: /(node_modules)/,
34                 use: [ 
35                     'style-loader', {
36                         loader : 'css-loader',
37                         options : {
38                             importLoaders : 1
39                         },
40                     },
41                     'postcss-loader'
42                 ]
43             },
44             {
45                 test: /\.less$/,
46                 use: [
47                     {
48                         loader: "style-loader"
49                     }, {
50                         loader: "css-loader"
51                     }, {
52                         loader: "less-loader"
53                     }
54                 ]
55             },
56             {
57                 test: /\.(html)$/,
58                 use: {
59                     loader: 'html-loader',
60                 }
61             },
62             {
63                 test: /\.(ejs)$/,
64                 use: {
65                     loader: 'ejs-loader',
66                 }
67             }
68         ]
69     }
70 }

然后执行webpack打包命令，就能看见新的ejs模板中的数据被嵌入在id为app的div中

 

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用

下一篇：如何快速把 Vue 项目升级到 webpack3

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签