webpack4系列第二篇（处理css，js（es6等））

接上篇webpack4系列第一篇，先来看下上篇的目录结构：

1559221356(1).jpg
package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^2.0.2",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.4.1"
  }
}

webpack.config.js:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    entry: './src/index.js', //入口文件
    output: {
        filename: 'bundle.[hash].js', //默认为main.js  [hash]是为了避免js缓存
        path: path.resolve(__dirname,'./dist') //path为绝对路径，用node path模块转化
    },
    mode: 'development', //开发模式
    devServer:{ //开发服务器配置
        port: 3000, //端口号
        progress: true, //进度条
        contentBase: './dist', //服务默认指向文件夹
        open: true //自动打开浏览器
    },
    plugins:[ //存放插件
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板
            filename: 'index.html', //默认也是index.html
            minify: {
                removeAttributeQuotes: true, //删除标签属性的双引号
                collapseInlineTagWhitespace: true, //打包成一行
            },
            hash: true, //增加hash，避免缓存
        }),
        new CleanWebpackPlugin()
    ]
}

四、css模块的配置

现在我们在src下新建一个style.css,如果你想用link标签在html引入，那么它是不会被打包的，我们需要把它用模块引入。
我们在index.js里用require引入：

require('./style.css')

如果此时执行npm run dev会报错，因为webpack默认只识别js,它不认识css,我们需要用适当的loader进行处理：
安装：
npm i css-loader style-loader -D
webpack.config.js中加入loader：

    module: {
        rules: [
               //css-loader 负责解析@import语法处理css  
               //style-loader将css插入到head标签中
            { test: /\.css$/, use: ['style-loader','css-loader'] }
        ]
    }

注意use是从右往左执行的，也就是先处理css之后再插入head标签。
loader可以处理css文件也可以处理less、scss等文件，这里以less为例再写一下：

    module: {
        rules: [ 
            { test: /\.css$/, use: ['style-loader','css-loader'] },
            { test: /\.less$/, use: ['style-loader','css-loader','less-loader'] },
        ]
    }

当然在运行npm run dev前要先安装
npm i less less-loader -D
此时在src下新建一个less文件写点样式，index里跟css文件一样require进去，也是生效的。
如果打包后不想样式插入到style标签，而是想通过link标签来引入呢？那么可以用mini-css-extract-plugin替代style-loader：
安装：
npm install --save-dev mini-css-extract-plugin
webpack.config.js中引入：

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...
module.exports = {
...
    plugins:[ //存放插件
        ...
    new MiniCssExtractPlugin({
      filename: 'style.css', //抽离的文件名
    }),
        ...
    ],
    module: {
        rules: [
            { test: /\.css$/, use: [MiniCssExtractPlugin.loader,'css-loader'] },
            { test: /\.less$/, use: [MiniCssExtractPlugin.loader,'css-loader','less-loader'] },
        ]
    }
}

对于需要兼容的样式，我们还可以用postcss-loader autoprefixer 自动增加前缀。

自动增加前缀

安装：

npm i -D postcss-loader autoprefixer

添加postcss-loader的配置文件postcss.config.js：

module.exports = {
    plugins: [require('autoprefixer')]
}

webpack.config.js里添加postcss:

module.exports = {
...
    module: {
        rules: [
            { test: /\.css$/, use: [MiniCssExtractPlugin.loader,'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','less-loader'] },
        ]
    }
...
}

说完了css，接下来我们来看一下js处理。

五、es6转化

install
npm install -D babel-loader @babel/core @babel/preset-env webpack
use:

module: {
  rules: [
    ...
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
    ... 
  ]
}

我们在index.js中加入一个箭头函数：

...
var f = function () { return 5 }
console.log(f())
...

执行npm run build来看一下,箭头函数已经被转化为普通的函数：

1559378148.png
es6内置方法转化：

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime //这个正式环境也要用

在校验js规则里加入 @babel/plugin-transform-runtime：

            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                    plugins:[
                        '@babel/plugin-transform-runtime',
                    ]
                  }
                }
            }

npm install --save @babel/polyfill 

js文件里引入：

require('@babel/polyfill')

后面的文章就不挨个运行截图了，代码我会上传到github，有需要的同学自行查看。https://github.com/laura233/webpack-demo