一、前言
有的CSS属性需要对不同的浏览器加上前缀，尤其在写CSS3动画代码时，原本只需要5-6行的代码，而针对不同浏览器却要写上10-20行的代码，代码量直接翻了几倍，不仅增加了开发成本，还会打断开发思路，甚至遗漏部分代码。而且现在各大浏览器正在逐步支持不带前缀的CSS3新属性，人工编写这部分代码可能造成代码冗余。可以使用前端自动化打包工具Webpack省去这部分的开发时间。
二、Node.js安装
三、项目配置
- 目录结构预览：
+ node_modules //npm install自动生成，包含node依赖以及开发依赖
+ app //开发目录（手动创建）
– main.css //目标css文件（手动创建）
– main.js //入口js文件（手动创建）
+ public //代码产出目录（手动创建）
– index.html //单页面项目主页（手动创建）
- bundle.js //打包生成
- main.css //打包生成
– package.json //初始化生成
– package-lock.json //初始化生成
– postcss.config.js //css处理配置（手动创建）
– webpack.config.js //文件打包配置（手动创建）- 初始化项目，在命令行工具中执行以下代码：
npm init
//注意npm版本（npm -v可以查看），笔者使用的是6.4.0，可以使用npm install npm@latest -g更新到最新版本- package.json，代码如下：
{
"name": "csspro",//注意修改项目名称
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.1.2", //添加前缀
"css-loader": "^1.0.0", //加载css
"cssnano": "^4.0.5", //css压缩
"file-loader": "^1.1.11", //css图片加载
"postcss-loader": "^3.0.0",
"url-loader": "^1.1.1", //css图片加载
"webpack": "^4.17.0"
},
"dependencies": {
"mini-css-extract-plugin": "^0.4.1"
}
}- 在命令行工具执行以下命令
npm install -D webpack-cli
npm install- 创建webpack.config.js：
var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: __dirname + "/app/main.js", //唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
module: {
rules: [{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader
}, {
loader: "css-loader"
}, {
loader: "postcss-loader"
}]
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
options: {
limit: 1,
name: 'images/[name].[ext]',
publicPath: '../'
}
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
],
};- 创建postcss.config.js：
module.exports = {
plugins: [
require('autoprefixer')({
"browsers": [
"> 1%",
"last 2 versions",
"not ie <= 8",
"ios >= 8",
"android >= 4.0"
]
}),
/*require('cssnano')({
preset: 'default',//css压缩
}),*/
]
}- 创建app/main.js，代码如下：
import './main.css';- 创建app/main.css，示例代码如下：
.test {
animation: demo 1s;
}
@keyframes demo {
0%, 100% {
transform: translate(10px, 10px, 10px);
}
50% {
transform: translate(0, 0, 0);
}
}- 创建public/index.html，引入打包后的js：
Document
- 在命令行工具中执行打包命令：
webapck四、打包前后比较
- 打包前main.css：
.test {
animation: demo 1s;
}
@keyframes demo {
0%, 100% {
transform: translate(10px, 10px, 10px);
}
50% {
transform: translate(0, 0, 0);
}
}- 打包后main.css：
.test {
-webkit-animation: demo 1s;
animation: demo 1s;
}
@-webkit-keyframes demo {
0%, 100% {
-webkit-transform: translate(10px, 10px, 10px);
transform: translate(10px, 10px, 10px);
}
50% {
-webkit-transform: translate(0, 0, 0);
transform: translate(0, 0, 0);
}
}
@keyframes demo {
0%, 100% {
-webkit-transform: translate(10px, 10px, 10px);
transform: translate(10px, 10px, 10px);
}
50% {
-webkit-transform: translate(0, 0, 0);
transform: translate(0, 0, 0);
}
}