关于webpack入门:webpack初学者笔记2

webpack 中 source map 应用

当打包后产生的谬误会无奈定位到对应的文件地位，所以应用 sourceMap 来定位打包前的对应文件地位行将编译后的代码映射回原始源代码

module.exports = {devtool: 'inline-source-map'}

webpack 中主动编译

1.webpack’s Watch Mode
依赖图中的所有文件以进行更改。如果其中一个文件被更新，代码将被从新编译，不用手动运行整个构建。

2.webpack-dev-server
提供了一个简略的 web 服务器，并且可能实时从新加载(live reloading)

npm install --save-dev webpack-dev-server

配置如下

module.exports = {
   devServer: {contentBase: './dist'}
}

3.webpack-dev-middleware
webpack-dev-middleware 是一个容器(wrapper)，它能够把 webpack 解决后的文件传递给一个服务器(server)。webpack-dev-server 在外部应用了它，同时，它也能够作为一个独自的包来应用，以便进行更多自定义设置来实现更多的需要

npm install --save-dev express webpack-dev-middleware

模块热更新

模块热替换 (Hot Module Replacement 或 HMR) 是 webpack 提供的最有用的性能之一。它容许在运行时更新各种模块，而无需进行齐全刷新。
启动配置 HMR(HotModuleReplacementPlugin)

 plugins: [new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin()],

tree shaking

移除打包中没有应用的代码
package.json

{"sideEffects": false}

环境拆散打包

提供环境参数确认以后环境 通过与 process.env.NODE_ENV 环境变量关联 将 webpack.config.js 拆分为
webpack.common.js
webpack.dev.js
webpack.prod.js
对立文件加不同环境用不同的 js 文件打包