（五）预处理器与构建工具集成
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"), ] ...
2：Webpack集成Less
npm install less less-loader --save-dev {
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
"css-loader",
"less-loader",
]
})
} .borde_style {
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
} #header a {
color: #111;
.borde_style;
}
#header span {
height: 16px;
.borde_style;
}
#header p {
color: red;
.borde_style();
}
