复习webpack的常用loader

今天复习了下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//实时刷新
  }

}