（五）预处理器与构建工具集成
1：webpack环境布置
-
搭建webpack环境
- package.json
npm init{ "name": "postcss", "version": "1.0.0", "description": "learn postcss", "main": "index.js", "scripts": { "build": "webpack --config webpack.config.js" }, "author": "eric", "license": "ISC", "devDependencies": {} }- webpack依赖包
npm install webpack webpack-cli --save-dev- webpack.config.js
const path = require('path'); module.exports = { entry: './index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, };- 打包index.js
import './style.css'; function app() { var element = document.createElement('div'); element.innerHTML = 'Hello Word!'; element.classList.add('header'); return element; } document.body.appendChild(app());- 分离css
npm install css-loader --save-dev npm install extract-text-webpack-plugin@next --save-dev npm install postcss-loader --save-devconst ExtractTextPlugin = require("extract-text-webpack-plugin"); ... module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: [ "css-loader", ] }) } ] }, plugins: [ new ExtractTextPlugin("bundle.css"), ] ...
