我们接着上文，那么在上篇文章的最后，写到了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: true14 ????????})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 : 139 ????????????????????????},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: true14 ????????})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 : 139 ????????????????????????},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‘ : tpl7 ????}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: true14 ????????})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 : 139 ????????????????????????},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: true14 ????????})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 : 139 ????????????????????????},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中
[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
原文地址：http://www.cnblogs.com/ghostwu/p/7504870.html