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

时间 2020-01-02

标签使用 webpack css 文件进行单独打包栏目 CSS 繁體版

原文原文链接

1、前言

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

2、Node.js安装

3、项目配置

+ 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

4、打包先后比较

打包前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文件进行单独打包

1、前言

2、Node.js安装

3、项目配置

4、打包先后比较

参考资料