Webpack-Tips Summary

2018-07-02

阅读量

1. webpack plugins

webpack-parallel-uglify-plugin
可以并行运行 UglifyJS 插件，更加充分而合理的使用 CPU 资源，这可以大大减少的构建时间

var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
  cacheDir: '.cache/',
  uglifyJS:{
    output: {
      comments: false
    },
    compress: {
      warnings: false
    }
  }
})

extract-text-webpack-plugin
(抽离单独的样式文件，在启用热更新之后无效，关闭即可)
使用 npm install extract-text-webpack-plugin@next 在webpack^4 以上版本中
webpack-bundle-analyzer: 可视化webpack资源
react-hot-loader
热加载局部更新：
webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack 的 HotModuleReplacement 热加载插件。

2. webpack loader

//每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如
//css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。
use: ['style-loader', 'css-loader?minimize'],

//给 Loader 传入属性的方式除了有 querystring 外，还可以通过 Object 传入
use: [
  'style-loader',
  {
    loader:'css-loader',
    options:{
      minimize:true,
    }
  }
]

3. webpack operation

–-history-api-fallback 在package.json 的start”后添加-–history-api-fallback参数
对于单页面程序，浏览器的brower histroy可以设置成html5 history api或者hash，而设置为html5 api的，如果刷新浏览器会出现404 not found，原因是它通过这个路径（比如： /activities/2/ques/2）来访问后台，所以会出现404，而把historyApiFallback设置为true那么所有的路径都执行index.html。
解决用 react-router 的 link 能切换路由，而刷新或直接URL输入路由地址出现Cannot GET /about
出现这个问题的原因在于：无论你传递了什么 URL，服务器都需要传递给你的 app，因为你的应用直在操纵浏览器中的 URL，但是当前的服务器却不知道如何处理这些 URL。

4. webpack article

为什么我们用webpack生成的文件名后面要带上一串哈希码？
在打包出来的文件名上加上文件内容的hash是目前最常见的有效使用浏览器长缓存的方法，js文件如果有内容更新，hash就会更新，浏览器请求路径变化所以更新缓存，如果js内容不变，hash不变，直接用缓存