url-loader 现在来我们来试试加载图片，第一件事情肯定是安装对应的loader，可以将小图片转换成base64，减少请求 npm install url-loader file-loader –save-dev
//修改index.html加两个div，背景图片设置成两张图片，一个小的，一个大的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <div id="parent"> <div id="a"></div> <div id="b"></div> </div> </body> <script src="bundle.js"></script> </html> //index.css增加 #parent{ color: red; } #a{ background-image: url(img/1.png); height:10px; width:10px; } #b{ background-image: url(img/avatar.jpg) ; background-size:100% 100%; height:50px; width:50px; } //增加webpack.config.js中的loader module: { rules: [ { test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader loader: "babel-loader" }, { test: /\.css$/, loader: "style-loader!css-loader"//添加对样式表的处理 }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]" } ] }新建一个img文件夹，在里面放置一个小于8k的图片1.png，一个大于8k的图片avatar.jpg，修改好之后输入npm run webpack，可以看到小于8k的图片被转换成了base64，而大的图则通过file-loader直接引入了图片，并加上了hash的值
sass-loader 先安装下相关的依赖 npm install –save-dev sass-loader node-sass //需要两个一起装，单装一个node-sass好像会报错
//新建一个scss文件夹新建一个index.scss文件,注意是scss，scss，scss $length: 50px; #a{ width: $length; height: $length; } //index.js中增加scss的引用 require('./scss/index.scss'); webpack.config.js module: { rules: [ { test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader loader: "babel-loader" }, { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' }, { test: /\.css$/, loader: "style-loader!css-loader"//添加对样式表的处理 }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]" } ], }继续npm run webpack，可以发现scss文件被打包打进去了，宽高40px替换掉了之前的10px
less-loader npm install less less-loader –save-dev
//新建一个less文件夹新建一个index.less文件 @borderlength: 2px; #b{ border: @borderlength solid red; } //index.js中引入less文件 require('./less/index.less'); //webpack.cofig module: { rules: [ { test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader loader: "babel-loader" }, { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' }, { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, { test: /\.css$/, loader: "style-loader!css-loader"//添加对样式表的处理 }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]" } ], }json-loader npm install json-loader –save-dev
// webpack.config.js中增加 module: { rules: [ {test: /\.json$/,loader: 'json'}, ] }postcss postcss感觉弄起来还是有点复杂的 npm install postcss-loader autoprefixer –save-dev
//新建一个postcss。config.js的配置文件 module.exports = { plugins: [ require('autoprefixer') ] } //修改webpack.config.js中需要使用postcss的css文件中的loader，以scss为例 //头部因如下 const autoprefixer = require('autoprefixer'); //修改module { test: /\.scss$/, // loader: 'style-loader!css-loader!sass-loader!postcss-loader' use: [ { loader: 'style-loader'}, { loader: 'css-loader'}, { loader: 'postcss-loader', options: { plugins: () => [autoprefixer( { browsers: ['iOS >= 7', 'Android >= 4.1', 'last 10 Chrome versions', 'last 10 Firefox versions', 'Safari >= 6', 'ie > 8'] } )], }, }, 'sass-loader' ] } //index.scss中随便加点需要兼容的css样式 $radius: 10px; #b{ display:flex; border-radius: $radius; transform: scale(0.8); }用webpack打包之后生成的头部自动打上了一些兼容的css，是不是很方便呢？
webpack.config.js汇总
const autoprefixer = require('autoprefixer'); module.exports = { entry: __dirname + "/index.js", output:{ path: __dirname, filename: 'bundle.js' }, module: { rules: [ { test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader loader: "babel-loader" }, { test: /\.scss$/, // loader: 'style-loader!css-loader!sass-loader!postcss-loader' use: [ { loader: 'style-loader'}, { loader: 'css-loader'}, { loader: 'postcss-loader', options: { plugins: () => [autoprefixer( { browsers: ['iOS >= 7', 'Android >= 4.1', 'last 10 Chrome versions', 'last 10 Firefox versions', 'Safari >= 6', 'ie > 8'] } )], }, }, 'sass-loader' ] }, { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]" } ], } }获取更多webpack-loader
相关代码提交在https://github.com/kuaisufei/webpack-learn中的webpack-loader中
