Webpack 速查表

本文根据 Devhints / Webpack 翻译。代码示例及版本范围沿用原文。原文标注更新日期：2017-09-26。

这是一份关于 Webpack 的基础入门指南，适用于 Webpack v3 版本。它并未涵盖所有功能，但足以帮助你了解配置文件格式。

基本配置

webpack.config.js

module.exports = {
  context: __dirname,
  entry: 'src/app.js',
  output: {
    path: __dirname + '/public',
    filename: 'app.js'
  }
}

终端

npm install --save-dev webpack

这会将 src/app.js 编译为 public/app.js。（说明：可能需要使用 ./node_modules/.bin/webpack 作为命令，尤其是在未通过 npm 脚本调用 Webpack 时。）

多个文件

webpack.config.js

module.exports = {
  entry: {
    app: 'src/app.js',
    vendor: 'src/vendor.js'
  },
  output: {
    path: __dirname + '/public',
    filename: '[name].js'
  }
}

这将创建 app.js 以及 vendor.js.

加载器 (Loaders)

Babel

终端

npm install --save-dev \
  babel-loader \
  babel-preset-env \
  babel-preset-react

webpack.config.js

module.exports = {
  ···
  module: {
    rules: [
      { test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' }
        ]
      }
    ]
  }
}

.babelrc

{
  "presets": [ "env", "react" ]
}

添加对……的支持 Babel.

CSS

终端

npm install --save-dev \
  css-loader \
  style-loader

webpack.config.js

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

您的 JavaScript

import './styles.css'
// or:
require('./styles.css')

这允许您在 JavaScript 中使用 CSS。它会将 CSS 打包进您的 JavaScript 资源包 (bundle) 中。

PostCSS

终端

npm install --save-dev \
  postcss-loader \
  postcss-cssnext

webpack.config.js

···
// Inside module.rules[]:
{ test: /\.css$/,
  exclude: /node_modules/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
    { loader: 'postcss-loader' }
···

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-cssnext')()
  ]
}

此示例添加了 postcss-cssnext 从而为您的 CSS 文件提供支持。

其他功能

开发服务器

package.json

{ ···
  "scripts": {
    "dev": "webpack-dev-server"
  }
}

终端

npm install --save-dev \
  webpack-dev-server

npm run dev

这会启动一个用于开发的 HTTP 服务器（默认端口为 8080）。