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

參考資料

相關標籤/搜索