webpack4

webpack4与之前的版本差别很大，当webpack每个大版本的更新，都需要重新学习一下webpack的打包功能，因为每次的大版本更新带来的一连串的别的模块的跟随更新，而上下版本之前是不兼容的。

1、安装

先安装node与npm。
建议局部方式安装，因为webpack的版本更新很快，使用全局可能会出现不兼容的报错问题。

1
2
3
4
5
6
7
8
9
10
// 创建项目文件夹
npm init
// 安装webpack与webpack-cli
cnpm webpack webpack-cli --save-dev
// 创建webpack.config.js文件，使用webpack指令时会访问到这个webpack配置文件
// 在package.json的scripts里添加webpack指令。如
"scripts": {
    "start": "webpack"
  }
// 在终端执行指令npm start 就会执行局部安装的webpack指令，实现简单的打包功能

2、babel安装

而babel的更新也是很快的，所以之前安装babel的方式已经不符合了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
cnpm install babel-cli babel-loader @babel/preset-env @babel/core --save-dev

// .babelrc
{
    "presets": [
        ["@babel/preset-env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
    ],   
    "plugins": []
}

在.babelrc配置文件中，主要是对预设（presets）和插件（plugins）进行配置。
presets 预设
targets可以制定兼容浏览器版本，如果设置了browsers，那么就会覆盖targets原本对浏览器的限制配置。
targets.node正对node版本进行编译
modules通常都会设置为false，因为默认都是支持CommonJS规范，同时还有其他配置参数：”amd” | “umd” | “systemjs” | “commonjs”。

1
2
3
4
5
6
7
8
9

{
  "targets": {
    "chrome": 52,
    "browsers": ["last 2 versions", "safari 7"],
    "node":"6.10"
  }
  "modules": false
}

3、webpack-dev-server热替换

安装

1
2
3
4
5
cnpm install webpack-dev-server --save-dev
// 配置启动
"scripts": {
    "dev": "webpack-dev-server"
  }

由于热替换的直接配置webpack.config.js里的devServer下，而不是通过CLI配置，所以如hot的配置需要在配置文件添加webpack.HotModuleReplacementPlugin插件，而CLI的配置会自动添加webpack.HotModuleReplacementPlugin。
由于启动了热替换，为了在终端上更好的观察变化情况，需要添加webpack.HotModuleReplacementPlugin()插件。

1
2
3
4
5
6
7
8
9
devServer: {
        hot: true,
        compress: true
    }
---------------------------
plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
]

4、html-webpack-plugin自动注入

使用过vue的一定都对它的开发环境下自动注入很好奇，为什么热替换下没有打包浏览器观察到的文件，而浏览器的开发者模式下观察到的文件与项目下文件不一样，而且项目下没有文件打包，这就是因为html-webpack-plugin与热替换的原因。

资料一
资料二

以上资料已经把html-webpack-plugin的使用很详细的介绍了。

而自动注入而不生成文件的，是因为使用热替换的情况下，会把变化的文件放到热替换的开启的服务器容器里，既内存里，只会在浏览器体验到它的打包变化，实际文件是没有变化的，而html-webpack-plugin会把js文件插入html里面，那么实现以上的效果。

完整代码

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "w4",
  "version": "1.0.0",
  "description": "webpack4",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.3.1",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "path": "^0.12.7",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].js'
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        hot: true,
        compress: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules|bower_components)/
              }
        ]
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
          })
    ]
}

github代码

webpack4

1
2
3
4
5
6
7
8
9
10
11
12
13

// 使用babel报错
Cannot read property 'bindings' of null
是因为没有正常安装与配置
解决:
cnpm install babel-cli babel-loader @babel/preset-env @babel/core --save-dev
{
"presets": ["@babel/preset-env"],
"plugins": []
}

还有由于使用babel转换要忽略这些文件
exclude: /(node_modules|bower_components)/