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