webpack4.0 入门实践教程(3)

--mode production 生产环境

• 提供 uglifyjs-webpack-plugin 代码压缩
• 不需要定义 new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") })
• 默认 production 默认开启 NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors , 编译出错时跳过输出，以确保输出资源不包含错误
• 默认开启 ModuleConcatenationPlugin -> optimization.concatenateModules , webpack3 添加的作用域提升( Scope Hoisting )

--mode development 开发环境

• 使用 eval 构建 module, 提升增量构建速度
• 不需要定义 new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }) 默认 development
• 默认开启 NamedModulesPlugin -> optimization.namedModules 使用模块热替换(HMR)时会显示模块的相对路径

添加了 scripts 之后，新建 src/index.js ，然后执行 npm run build ，你就会发现新增了一个 dist 目录，里边存放的是 webpack 构建好的 main.js 文件。

ps npm scripts 使用指南

新建 webpack.config.js 文件

要想对 webpack 中增加更多的配置信息，我们需要建立一个 webpack 的配置文件。在根目录下创建 webpack.config.js 后再执行 webpack 命令，webpack 就会使用这个配置文件的配置了

配置中具备以下的基本信息：

module.exports = {
 entry: '', // 打包入口：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
 output: '', // 出口
 resolve: {}, // 配置解析：配置别名、extensions 自动解析确定的扩展等等
 devServer: {}, // 开发服务器：run dev/start 的配置，如端口、proxy等
 module: {}, // 模块配置：配置loader（处理非 JavaScript 文件，比如 less、sass、jsx、图片等等）等
 plugins: [] // 插件的配置：打包优化、资源管理和注入环境变量
}

配置打包入口和出口

首先我们往 webpack.config.js 添加点配置信息

const path = require('path')

module.exports = {
 // 指定打包入口
 entry: './src/index.js',

 // 打包出口
 output: {
 path: path.resolve(__dirname, 'dist'), // 解析路径为 ./dist
 filename: 'bundle.js'
 }
}

上面我们定义了打包入口 ./src/index.js ，打包出口为 ./dist , 打包的文件夹名字为 bundle.js ，执行 npm run build 命令后，index.js 文件会被打包为 bundle.js 文件。此时随便建立一个 html 文件引用这个 bundle.js