今天复习了下webpack的常用loaders，其实习惯ES6开发的话，webpack的config.js基础配置应该是比较固定：
首先是JS，我们ES6要转为ES5，需要用到babel转码：
1.
npm install --save-dev babel-loader babel-core
2.在config.js中配置：
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
3.配置babel的preset：
npm install babel-preset-env --save-dev
4.项目目录下创建.babelrc文件，内容为：
{
"presets": ["env"]
}
5.当我们需要用到promise、map或ES6数组方法的时候，还要下载polyfill：
npm install --save babel-polyfill
6.使用polifill时候，要在entry中引入：
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
其次是css方面的loaders:
1.
npm i css-loader style-loader --save-dev
2.如果想使用预处理器比如sass：
npm i sass-loader node-sass --save-dev
*node-sass最近几个版本安装可能会报错，我今天就遇到，github也有网友反映了这问题（见上篇）
*使用sass要先安装ruby，然后命令行gem sass （这不影响我们在项目的webpack中使用sass）
3.postcss-loader是必须的，除非你想每个新的css3样式都查前缀：
npm i postcss-loader autoprefixer --save-dev
使用postcss的时候，文档推荐创建本地postcss-config.js配置文件，这样在webpack.config.js中在需要postcss-loader的时候直接调用就好了：
module.exports = {
plugins: [
require('autoprefixer')
]
}
然后是文件方面的,帮我们处理图片等：
npm i file-loader url-loader --save-dev
在webpack上处理图片的时候，难免会因为路径问题困惑。
我们知道项目中引用图片有以下几种情景：
1.html的<img src=’ ‘ >
2.css中背景图片引用
3.js中动态创建/生成img
4.行内样式中设置background-image
在webpack使用file-loader对图片打包时：
1.用html-withimg-loader配合htmlWebpackPlugin（见下边代码蓝色部分）
2.css的路径会自动替换
3.js中引用图片的src时，要用require（）
最后配置的config文件是：
1 var HtmlWebpackPlugin = require('html-webpack-plugin');
const path=require('path');
module.exports={
entry:['babel-polyfill','./src/js/a.js'],
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js',
publicPath:'/assets/'
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}, {test:/\.scss$/,
use:['style-loader',
{loader:'css-loader',options:{importLoaders:2}},
'postcss-loader','sass-loader']
},
//url
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name:'[name].[ext]'
}
}
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[ext]'
}
}
]
},
45 {
46 test: /\.(htm|html)$/,
47 loader: 'html-withimg-loader'
48 } ]
},
52 plugins:[
53 new HtmlWebpackPlugin({
54 template: 'html-withimg-loader!' + path.resolve(__dirname, 'index.html'),
55 filename: 'main.html'
56 })
57 ],
devServer: {
contentBase:__dirname, //浏览器cwd
historyApiFallback: true,//不跳转
inline: true//实时刷新
} }
