使用Webpack对CSS文件进行单独打包

自由引导人民

原文地址：https://segmentfault.com/a/1190000021459181
作者：Fw恶龙
本文首发于：思否

一、前言

有的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：

<!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>

在命令行工具中执行打包命令：

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);
  }
}

使用Webpack对CSS文件进行单独打包

一、前言

二、Node.js安装

三、项目配置

四、打包前后比较

参考资料

Fw恶龙

引用和评论

「译」理解CSS中的HTML和BODY元素

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

一个简易的DIY场景H5框架