一、前言

有的CSS属性需要对不同的浏览器加上前缀,尤其在写CSS3动画代码时,原本只需要5-6的代码,而针对不同浏览器却要写上10-20行的代码,代码量直接翻了几倍,不仅增加了开发成本,还会打断开发思路,甚至遗漏部分代码。而且现在各大浏览器正在逐步支持不带前缀的CSS3新属性,人工编写这部分代码可能造成代码冗余。可以使用前端自动化打包工具Webpack省去这部分的开发时间。

二、Node.js安装

  1. Node.js官网
  2. Node.js安装及环境配置之Windows篇

三、项目配置

  1. 目录结构预览:
+ 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 //文件打包配置(手动创建)
  1. 初始化项目,在命令行工具中执行以下代码:
npm init
//注意npm版本(npm -v可以查看),笔者使用的是6.4.0,可以使用npm install npm@latest -g更新到最新版本
  1. package.json,代码如下:(注: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"
  }
}
  1. 在命令行工具执行以下命令
npm install -D webpack-cli
npm install
  1. 创建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",
  }),
  ],
};
  1. 创建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压缩
  }),*/
  ]
}
  1. 创建app/main.js,代码如下:
import './main.css';
  1. 创建app/main.css,示例代码如下:
.test {
  animation: demo 1s;
}

@keyframes demo {
  0%, 100% {
    transform: translate(10px, 10px, 10px);
  }
  50% {
    transform: translate(0, 0, 0);
  }
}
  1. 创建public/index.html,引入打包后的js:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>
  1. 在命令行工具中执行打包命令:
webapck
  1. WebPack4.0 报 The ‘mode’ option has not been set错误,执行以下其中一条即可,但还不太清楚开发模式和生产模式的区别
webpack --mode development
webpack --mode production

四、打包前后比较

  1. 打包前main.css:
.test {
  animation: demo 1s;
}

@keyframes demo {
  0%, 100% {
    transform: translate(10px, 10px, 10px);
  }
  50% {
    transform: translate(0, 0, 0);
  }
}
  1. 打包后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);
  }
}

参考资料

分类: 前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注