打包工具webpack4

webpack真是个神坑，吐槽不说了，直接开撸
webpack4的号称可以零配置使用

零配置使用

创建文件夹然后进入

mkdir webpack4-quickstart && cd $

初始化一个package.json

npm init -y

安装webpack4和webpack-cli

cnpm i webpack webpack-cli -D

打开package.json，加入一段script

"scripts":{
  "build": "webpack"
}

尝试运行一下

npm run build

可以看见报错ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'
也就是说如果没有任何配置，webpack4会从./src中去获取入口js，以前版本的webpack都需要在webpack.config.js中定义entry:xxx.js

新特性：生成模式和开发模式

一个典型的项目会有
1.开发环境下的配置文件，可以使用webpack dev server或其他开发功能
2.生产环境下的配置文件，可以提供UglifyJSPlugin，sourcemaps和其他

但是webpack4你可以不需要一行配置，打开package.json写入如下脚本

"scripts": {
  "dev":"webpack --mode development",
  "build":"webpack --mode production"
 }

通过运行npm run dev和npm run build可以发现./dist/main.js一个是压缩过的，一个是没压缩的

重写默认entry/output

也在package.json中定义

"scripts": {
  "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
  "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}

通过Babel编译Javascript

现代js主要都是用ES6，但不是每个浏览器都支持ES6,我们需要一些转换来解决兼容问题。
webpack当然是不知道怎么去转换的，但是可以用loaders，babel-loader就是用来把ES6转化成ES5的，首先我们需要安装依赖

cnpm i babel-core babel-loader babel-preset-env --save-dev

还需要创建Babel配置文件.babelrc

{
    "presets": [
        "env"
    ]
}

这时候我们还是创建一个webpack的配置文件吧，创建一个webpack.config.js的文件，然后写入

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

如果你不打算自定义，那么你也可以不写入口文件，然后在./dist/index.js写入一下ES6代码，运行一下

npm run build

现在你可以在./dist/main.js去看编译后的代码了

如果你不想写配置文件，也可以在package.json中这样写

"scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader",
    "build": "webpack --mode production --module-bind js=babel-loader"
  }

React设置webpack4

暂略

HTML插件

首先安装依赖

npm i html-webpack-plugin html-loader --save-dev

然后更新webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

抽离出CSS作为独立文件

以前是extract-text-webpack-plugin，这个现在只有beta版兼容webpack4，须通过cnpm -i extract-text-webpack-plugin@next来安装
这里推荐用min-css-extract-plugin，首先还是安装

npm i mini-css-extract-plugin css-loader --save-dev

然后创建CSS文件

/* */
/* CREATE THIS FILE IN ./src/main.css */
/* */
body {
    line-height: 2;
}

配置plugin和loader

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

在入口文件加引入css

//
// PATH OF THIS FILE: ./src/index.js
//
import style from "./main.css";

最后通过npm run build构建

webpack dev server

npm i webpack-dev-server --save-dev

"scripts": {
  "start": "webpack-dev-server --mode development --open",
  "build": "webpack --mode production"
}

npm run start

参考
from 0 Conf to Production Mode
消除css冗余代码

打包工具webpack4