[js高手之路]深刻淺出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

時間 2019-11-08

標籤高手之路深刻 webpack 教程系列 postcss loader autoprefixer html ejs 用法欄目 JavaScript 简体版

原文原文鏈接

[js高手之路]深刻淺出webpack教程系列索引目錄：css

咱們接着上文，那麼在上篇文章的最後，寫到了css-loader的用法，若是你用心發現，就能看到我在style.css樣式文件中寫了一個這樣的樣式：html

div {

transition: all ease 1s;

}

1、這是一個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插件node

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

 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前綴了:css3

2、安裝less-loader插件web

若是咱們在modal.js中直接引入modal.less，而後webpack打包，這樣會報錯npm

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 lessbash

安裝完成以後，配置webpack.config.jsbabel

 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文件中樣式就被嵌入進來了

3、安裝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元素內了

4、修改模板後綴，爲模板賦值

安裝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 }