webpack 配置

css

• CSS Loader (opens new window)
• PostCSS for Webpack (opens new window)
• less-loader (opens new window)
• Extract Text Plugin (opens new window) 解决 ExtractTextPlugin 分离出 .CSS 不被压缩问题
• optimize-css-assets-webpack-plugin (opens new window)

html

plugins: [
    new ExtractTextPlugin("style.css"),
    new HtmlWebpackPlugin({
      title: libraryName + ' Demo',
      filename: '../demo/index.html',
      template: __dirname + '/src/index.ejs'
    })
  ]

• HTML Webpack Plugin (opens new window)

解决引用 jquery 插件问题

window.$ = window.jQuery = require('jquery');

npm 命令

• 开发

"scripts": {
    "dev": "webpack --progress --colors --watch"
  },

服务器

• webpack-dev-server (opens new window)
• webpack-dev-server - github (opens new window)

不要设置 hot 任何选项，不然会报错 hot Module replce is disabed

为 umd 插件设置 global namespace

  output:
    path: path.join root, './.tmp'
    filename: '[name].js'
    sourcePrefix: "\t"
    library: [nameSpace, camelize pluginName]
    libraryTarget: 'umd'
    umdNamedDefine: true

导出的 module 总为 {}

查看 index.js 是不是忘记 module exports = yourModule

插件

• webpack-contrib (opens new window)

参考资料

• webpack多页应用架构系列 (opens new window)
• 解决热更新 (opens new window)