學習webpack4 - 樣式處理

時間 2019-12-06

標籤學習 webpack4 webpack 樣式處理简体版

原文原文鏈接

學習webpack4 - 基礎配置
 學習webpack4 - HTML處理
 學習webpack4 - 樣式處理
 學習webpack4 - ES6語法轉化
 學習webpack4 - 第三方庫的使用
 學習webpack4 - 抽離公共部分css

...持續中html

=======================================================node

樣式處理

注意：開始以前如下內容以前，須要配置一些webpack的基礎配置，傳送門：學習webpack4.x - 基礎配置webpack

當前目錄爲：css3

index.html文件內容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>丸子</title>
</head>
<body>
  <div>我是一個html原文件，我想打包後自動把打包後的js插入到個人文件中， 而且把我自動放到打包後的那個目錄中...</div>
</body>
</html>

package.json文件內容：

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack --mode development && webpack-dev-server",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.4",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14",
    "webpack-html-plugin": "^0.1.1"
  }
}

webpack.config.js文件內容：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // mode: 'development',

  //開一個本地服務
  devServer: {
    port: 3000, //端口號
    progress: true, //進度條
    contentBase: './dist', //指定目錄運行服務
    open: true //自動打開瀏覽器
  },
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  //插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', //原始文件
      filename: 'index.html', //編譯後的文件名稱
      hash: true, //hash
    })
  ]
}

下面開始配置css：web

css配置

首先看看這種直接引入css的方法行不行：

step1: 打開src目錄，新建index.css文件，並輸入：npm

body {
  background: red;
}

step2: 打開src目錄的index.html，直接把index.css文件引入，以下：json

<link rel="styleSheet" href="./index.css" />

嘗試運行： npm run dev，成功，結果以下：segmentfault

查看編譯好的dist目錄發現，這種直接引用css的方法雖然沒有報錯，可是在dist/index.html中只是原封不動的把<link rel="styleSheet" href="./index.css" />輸出了，css並無生效，因此這種直接引入的方法不可行，那麼怎麼樣把css引入進來呢？方法以下：瀏覽器

把css做爲模塊引入文件：

step1：打開src/index.js文件，引入要編譯的css文件：index.css

require('./index.css');

嘗試運行：npm run dev, 結果以下：

報了個錯說須要一個合適的loader來處理這個css文件，接下來進行相應的配置：

step2: 打開webpack.config.js文件，進行module配置:

// 模塊配置
  module: {
    rules: [
      {test: /\.css$/, use: ['style-loader', 'css-loader']}
    ]
  },

安裝style-loader, css-loader:

yarn add style-loader css-loader -D

嘗試運行：npm run dev，body背景顏色變紅，成功！結果以下：

補充
1. loader：webpack編譯對於css，圖片，或者其餘的語法集好比jsx等這些是沒有辦法直接加載的，須要對應的loader把資源進行轉化並加載，執行順序：從右到左，從下到上。
2. css-loader: 解析css中的代碼，像是@import這種語法，好比在index.css中引入另外一個other.css文件，須要@import './other.css'。
3. style-loader: 將css模塊做爲樣式插入到DOM中。

抽離css文件

上邊那種方式是把css直接插入到了html中，如圖：

這樣很亂，咱們能夠抽離css，引入到html中，方法以下：

step1: 安裝mini-css-extract-plugin插件：

yarn add mini-css-extract-plugin -D

step2: 打開webpack.config.js文件，進行配置：

let MiniCssExtractPlugin = require('mini-css-extract-plugin'); //抽離CSS

//插件配置
plugins: [
  new MiniCssExtractPlugin({
    filename: 'main.css' //抽離出的css文件名稱
    //filename: 'css/main.css  //抽離出的css文件存放在css目錄下
  })
]

 // 模塊配置
 module: {
   rules: [{
     test: /\.(css|scss)$/,
     //將style-loader 改成 MiniCssExtractPlugin.loader，表示該類型的文件會被抽離成一個獨立css文件，link引入到html中。
     use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
   }]
 },

嘗試運行：npm run dev, 抽離成功，這裏index.css, index.scss文件合併在一塊兒被生成了一個main.css，引入到了dist/index.html文件中，如圖：

less配置

step1：打開src目錄，新建index.less文件，並輸入：

body {
  div {
    width: 500px;
    height: 500px;
    background: yellow;
  }
}

step2: 打開src/index.js文件，引入index.less文件：

require('./index.less');

step3: 打開webpack.config.js文件，修改module部分：

// 模塊配置
  module: {
    rules: [
      {test: /\.(css | less)$/, use: ['style-loader', 'css-loader', 'less-loader']},
    ]
  },

step4: 安裝less, less-loader：

yarn add less less-loader -D

嘗試運行：npm run dev，成功！結果以下：

scss配置

step1: 基礎目錄配置以後，打開webpack.config.js文件，配置module部分：

// 模塊配置
  module: {
    rules: [
      {test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader']}, 
    ]
  },

step2: 安裝node-sass, sass-loader：

yarn add node-sass sass-loader -D

step3: 嘗試運行：npm run dev，成功！

給css加前綴

咱們在寫css的時候，遇到一些css3語法須要加瀏覽器前綴去兼容，每次寫-webkit-之類的前綴很麻煩，有一種方法自動給css加上這種前綴，以下：

step1: 配置webpack.config.js文件

// 模塊配置
  module: {
    rules: [{
      test: /\.(css|scss)$/,
      //增長postcss-loader
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
    }]
  },

step2: 增長配置文件postcss.config.js,並配置以下:

module.exports = {
  plugins: [require('autoprefixer')]
}

step3: 安裝插件：

yarn add postcss-loader autoprefixer -D

嘗試運行：npm run dev，成功，如圖：

優化項配置

項目上線前打包的時候，想把編譯好的css, js文件壓縮了怎麼處理呢？須要優化項插件optimize-css-assets-webpack-plugin，uglifyjs-webpack-plugin方法以下：

step1: 配置webpack.config.js文件

let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin'); //壓縮css
let UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //壓縮js

//優化項配置
optimization: {
  minimizer: [
    new OptimizeCssPlugin(),  //壓縮css
    
    //壓縮js
    new UglifyJsPlugin({
       cache: true, //緩存
       parallel: true, //併發打包
       sourceMap: true  //源碼映射便於調試
    })
  ]
},

step2: 安裝插件

yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

嘗試打包： npm run build, 結果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。