nature book bug burger costumes doctors hospital office shoes skull rocket

Webpack2 构建 PostCSS

目前没有发现任何资料,是专门讲 Webpack2 + PostCSS 这个组合的配置。因为 Webpack2 目前还处于 Beta 版,文档和资料非常少,而 PostCSS 的资料也少。通过不断摸索成功了,决定把配置成果整理成文。

编程环境

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

工具简介

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

(需要注意,webpack2 并没有完全兼容 1 的配置。)

初始化和安装

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

创建配置

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

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

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

安装 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

安装 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

配置 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 构建结果(生产环境使用)

配置 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

打开浏览器:localhost:8080

外置 CSS

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

安装

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

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

配置

要修改 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")

这样就实现了 CSS外化 的功能!

命令简写

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

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

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

#启动构建
npm start

参考资料