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