webpack4——小demo

环境搭建，写一个小demo

1、初始化项目

npm init -y

2、引入webpack4

npm i webpack --save-dev

2、 webpack-cli ，作为一个单独的包引入：

npm i webpack-cli --save-dev

3、package.json 并添加一个 build(构建) 脚本

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

4、尝试运行：

npm run build

5、报错了

ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'

意思是./src这个路径下面没有入口点
webpack4中默认./src/index.js为入口文件
我们只需要新建一个./src/index.js文件

然后

npm run build

我们可以看到dist/main.js生成了

6、又报错了

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

“模式”选项尚未设置。 将 “mode” 选项设置为 “development” 或 “production” 以启用此环境的默认值。

我们需要设置模式

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

再执行就不会报错了

模式

production mode(生产模式) 可以开箱即用地进行各种优化。 包括压缩，作用域提升，tree-shaking 等。

另一方面，development mode(开发模式)针对速度进行了优化，仅仅提供了一种不压缩的 bundle 。