Webpack2 构建 PostCSS

2017-05-25 本文已影响185人 cbw100

1. 编程环境

假设大家都装了 NodeJS环境，并且了解 npm
的基础用法。
我使用 Macbook 的 Shell，所以加 sudo。Windows 环境下也测试无误，建议使用 Git Shell 工具，但是请输命令的时候，不要加 sudo。

2. 工具简介

Webpack 是德国开发者 Tobias Koppers 开发的模块加载器. 在 Webpack 当中, 所有的资源都被当作是模块, JS, CSS, 图片等。其功能强大，我已经用来取代 Grunt/Gulp 等构建工具，处理 CSS 和 JS，完全满足我工作需求。
PostCSS 是对 CSS 本身做模块化转换，转换功能分别由不同插件配合完成，因此可以个性化配置。体验上比 Sass 更强大和灵活，并且速度更快。另外由于不同功能模块完全独立，所以更容易维护和升级。
（需要注意，webpack2 并没有完全兼容 1 的配置。）

3. 初始化和安装

下面我们分别安装所需的模块。

3.1 创建配置

用命令行切换到项目目录下，初始化 package.json文件.

sudo npm init -y #初始化 package，并且全部选项 yes

这个命令会在项目文件夹下生成一个 package.json 文件，用来管理 nodejs 模块。

3.2 安装 Webpack2

由于是 Beta 版，所以安装时必须指定版本。我安装的是如下版本：

sudo npm i -D webpack@2.1.0-beta.27
# i 是 install 的缩写用法
# -D 是 --save-dev 的缩写用法，dev 意思是用在开发环境

webpack 的构建过程，是基于不同的加载器。每种文件类型，对应自己的加载器。

使用 PostCSS，至少安装下面三种加载器：

#安装 样式加载器、CSS加载器、PostCSS加载器
sudo npm i -D style-loader css-loader postcss-loader

为了方便开发，还需要装 webpack-dev-server 对应的 Beta 版。稍后会解释做什么用途~

sudo npm i -D webpack-dev-server@2.1.0-beta.12

3.3 安装 PostCSS

由于 PostCSS 是一个插件平台，每个人所需的“功能模块”都不同，所以我这里只演示我个人配置。

安装 Postcss

sudo npm i -D postcss

安装我所需的功能模块

sudo npm i -D cssnext postcss-atroot postcss-conditionals postcss-each postcss-extend postcss-for postcss-import postcss-mixins postcss-nested postcss-simple-vars

4. 配置webpack2

webpack 做的事情是用对应的 loader(加载器)，去加载和解析资源。

. css 有 CSS加载器；
. png 有图片加载器；
. js 有 JS加载器；
…
本文稍后会讲如何配置一个 css 加载器，使用 PostCSS 去解析 .css 资源。

通常，我们使用 webpack 生成一个 bundle.js 文件。这个文件是所有资源的集合，HTML 只需引用这个文件即可。

但是在开发环境中，我们并不需要真正的生成一个 bundle.js 文件，因为实时编译和生成，效率很低。
那怎么办呢？让他存在内存中即可，而后 HTML 引用内存中的 bundle.js 内容。这样做，实时编译时效率更高，并且方便调试。

为此，我们还需要安装 webpack-dev-server！

这是一个基于 Express 的微型 HTTP 服务器，他可以在本地通过 http:// 的方式访问项目文件。主要功能是虚拟HTML 和虚拟bundle.js ，也就是说他们不必真的存在，只需要在内存中运行。并且通过功能扩展插件，可以继承其他强大功能。

我们可以直接通过在命令行，使用 webpack 命令结合各选项设定，完成构建工作。但是这样并不方便，所以我们需要创建 webpack.config.js 配置文件，这样我们只需要简短的命令，就能够应用复杂的配置。运行 webpack 时会默认读取当前命令行目录下的 webpack.config.js 文件里的配置。

我们可以在编辑器里新建，或者是通过命令行创建这个配置文件：

sudo touch webpack.config.js #在当前目录下 创建 webpack.config.js 文件

之后编辑配置文件(webpack.config.js)：

//加载 webpack.
const webpack = require('webpack');
//创建 webpack 配置.
const config = {
  //入口程序，支持 字符串 或 数组（多个入口）.
  entry: [
    //应用程序入口.
    __dirname + '/src/index.js'
  ],
  //输出配置，包含额外选项.
  output: {
    //输出文件.
    filename: 'bundle.js',
    //输出路径.
    path: __dirname + '/src',
    //HMR 知道在哪里加载，这是热更新模块所必需的
    publicPath: '/'
  },
  //基本目录，一个绝对路径，用于从配置中解析入口点和装载器。
  context: __dirname + '/src',
  //生成 source map（源映射）.
  devtool: 'inline-source-map',
  //webpack-dev-server 配置选项
  devServer: {
    //如果要对资产启用 gzip 压缩，请设置此值
    compress: true,
    //匹配输出路径，也可以是一个数组，或者 contentBase: "http://localhost/"
    contentBase: __dirname + '/src',
    //捆绑的文件将在此路径下的浏览器中可用
    publicPath: '/',
    //指定要侦听请求的端口号.
    port: 8080,
  },
  //这些选项确定如何处理项目中不同类型的模块。
  module: {
    rules: [
      // CSS 和 POSTCSS 加载器，使用嵌入 CSS.
      {
        //设置对应的资源后缀.
        test: /\.(css|scss)$/,
        //设置后缀对应的加载器.
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader?modules' },
          { loader: 'postcss-loader' },
        ]
      }
    ]
  }
  //插件以各种方式定制 webpack 构建过程
  plugins: [
    //跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。
    new webpack.NoErrorsPlugin(),
    //在 HMR 更新的浏览器控制台中打印更易读的模块名称
    new webpack.NamedModulesPlugin(),
  ]
};
//导出模块.
module.exports = config;

上面配置中的路径，是我项目使用的路径。

/src 存放源文件
/dist 构建结果(生产环境使用)

5. 配置postcss

PostCSS 的配置文件，我们采用外置的方式.

在项目根目录下创建 postcss.config.js 文件，输入配置：

module.exports = {
  plugins: [
    require('postcss-conditionals')(),
    require('postcss-simple-vars')(),  //https://www.npmjs.com/package/postcss-simple-vars
    require('postcss-each')(),
    require('postcss-for')(),
    require('postcss-mixins')(),
    require('postcss-import')(),
    require('postcss-nested')(),
    require('postcss-atroot')(),
    require('cssnext')({
      features: {rem: false}
    }),
    require('postcss-extend')()
  ]
}

到目前为止，我们已经实现了目标！只需在命令行输入以下命令，等待文件构建，便可在浏览器中查看了！

webpack-dev-server

6. 外置css

因为 webpack 的特点，CSS 会被嵌入到 HTML 的 Style 里，这对于多数前端来说很不方便。如果你介意，那么可以通过 extract-text-webpack-plugin 插件，提取 CSS 到独立的文件中。

6.1 安装

需要装最新的测试版，才能在 webpack2 中正常工作：

sudo npm i -D extract-text-webpack-plugin@2.0.0-beta.4

6.2 配置

要修改 webpack.config.js 文件，在最开始引入模块：

//加载CSS提取模块
const ExtractTextPlugin = require("extract-text-webpack-plugin");

还要修改 module 部分的配置，修改 css 加载器：

(webpack.config.js)

//原来
/*
{
  test: /\.(css|scss)$/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader?modules' },
    { loader: 'postcss-loader' },
  ]
}
*/
//新的
{
  test: /\.(css|scss)$/,
  use: [
    {
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules', 'postcss-loader')
    }
  ]
}

还要修改 plugins 部分的配置，增加一条插件配置：

(webpack.config.js)

//样式存成 'global.css' 文件.
new ExtractTextPlugin("global.css")

7. 命名简写

修改 package.json 文件，在 ‘scripts’ 部分，加入一条 start 命令:

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

这样可以在命令行通过简易的方式，运行 webpack-dev-server。特别适合有额外参数的时候~

#启用构建
npm start

8. 总结

webpack2配置postcss有两种方式:

8.1 使用postcss.config.js

安装postcss-load-config
配置postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')({ /* ...options */ })
    ]
}

8.2 webpack LoaderOptionsPlugin

第二种办法是webpack.config.js使用LoaderOptionsPlugin

module.exports = {
    plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: function(){
                    return [
                        require("autoprefixer")({
                            browsers: ['ie>=8','>1% in CN']
                        })
                    ]
                }
            }
        })
    ]
}