2018-3-11

webpack 项目整理

业务项目整理

entry

本地热更新

1. 在本项目总安装webpack-dev-server

2. devServer配置中设置hot: true

3. plugins配置中设置new webpack.HotModuleReplacementPlugin()

4. output配置中设置publicPath: 'http://localhost:8188/dist/js/'

5. devServer配置中设置header允许跨域访问

6. 模块中设置接受热替换module.hot.accept()

OptimizeCSSPlugin ： 压缩css

HtmlWebpackPlugins：删除注释，空格等

productionGzip：

优化：

scope hoisting ModuleConcatenationPlugin(),：分析出模块之间的依赖关系，尽可能的把打散的模块合并到一个函数中去，但前提是不能造成代码冗余。

因此只有那些被引用了一次的模块才能被合并

tree-shake： 删除没有被引用的es6模块

bundle.js文件虽然对多余的模块进行了标记，但是并没有删除，这是因为webpack还没有执行压缩混淆操作，可以通过webpack -p命令对产出进行压缩处理，这时候会把打了unused harmony export 标签的模块删除掉。

1）只能处理模块级别，不能处理函数级别的冗余；

因为webpack的tree-shaking是基于模块间的依赖关系，所以并不能对模块内部自身的无用代码进行删除。

（3）只能处理JS相关冗余代码，不能处理CSS冗余代码。

目前webpack只对JS文件的依赖进行了处理，CSS的冗余并没有给出很好的工具。最近听了一个讲座，提到了webpack-css-treeshaking-plugin，该插件基于AST对CSS冗余代码进行了很好的处理。