关于 Webpack2 的一切

[evantianx]

// npm 标准配置
"scripts": {
  "start": "webpack --config webpack.config.js"
}

可以从 node_modules/.bin/webpack 访问 bin 版本

不推荐将 webpack 全局安装，可能会影响固定版本项目构建

[evantianx]

代码分离

CSS

安装 css-loader 和 style-loader

npm i -S css-loader style-loader

在 JS 模块中引入 CSS 文件:

import 'styles/main.css'

在 webpack.config.js 中配置:

module.exports = {
  module: {
    rules: [
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
    ]
  }
}

这样， CSS 就会与 JS 打包在一起，并且在初始加载之后，通过 <style> 注入样式，这样做的问题就是会造成 FOUC

ExtractTextWebpackPlugin

利用这个插件，我们可以将 CSS 单独打包，解决上述问题

npm install -D extract-text-webpack-plugin

配置 webpack.config.js:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        use: 'css-loader'
      })
    }]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
  ]
}