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']
})
]
}
}
})
]
}
前端学习交流QQ群：461593224
网友评论