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文件打包