Webpack 杂

loaders

在 React 里会用到 JSX, ES6, js, 统一使用 .js 作为后缀, 便于 babel 配置

npm install --save babel-loader

//
{
  test: /\.js?$/,
  exclude: /node_modules/,
  loader: 'babel',
  query:{
    presets: ['es2015', 'react']
  }
}
`</pre>

CSS, SCSS, ICONFONT 字体文件

<pre>`npm install --save style-loader css-loader sass-loader node-sass url-loader, file-loader
//
{
  test: /\.scss$/,
  loader: 'style!css!sass'
},
{
  test: /\.(png|jpg)$/,
  loader: 'url?limit-8192'
}

plugins

html-webpack-plugin 会由 entry 得配置将入口文件所属的 html 文件作为模板, 重新生成一个 html 文件, 其中的静态资源都已经根据配置打包好

使用 webpack 后, 对文件的版本 hash 会变得非常简单, 在出口文件 filename 中添加[hash]即可; 就目前而言, 清楚资源缓存的最好方法是文件名 hash, 由于每次改动后生成的文件名都不一样, 上线并不会覆盖之前的版本, 只是多了一个版本的文件, 页面即使同步有时间差, 要么访问旧版页面, 要么访问新版页面, 不会存在冲突. 这样服务器就可以放心的对静态资源开启永久强缓存, 并且有利于回滚, 至于静态资源产生的积压, 可以交由运维处理.