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