webpack怎么打包CSS

這篇“webpack怎么打包CSS”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“webpack怎么打包CSS”文章吧。

1，要打包的文件，和引入的模板文件準備

先準備好需要轉換的文件，放在src文件夾中，有index.css樣式文件和index.js。雖然說是把css也編譯打包，也是先將其轉換給index.js文件的,index中的文件內容import './index.css'

還有一個模板文件，也就是將打包編譯好的文件引入到的index.html文件

import './index.css'

2，環境搭建

npm init =》項目搭建環境的初始化

初始化就會自動生成webpack.json和node_modules包安裝的文件。

再在環境中安裝包

1）基本的webpack包的安裝

npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1

2）將模塊化編譯打包的文件自動引入模板文件，也就是html文件

npm install --save-dev html-webpack-plugin@4.3.0

3）橋梁文件loder-css和webpack的橋梁

識別css文件的安裝包

npm install --save-dev css-loader@4.1.1

CSS樣式以style的方式引入的

npm install --save-dev style-loader@1.2.1

CSS樣式以link的方式引入

npm install --save-dev mini-css-extract-plugin@0.9.0

最后安裝的包，可以從package.json中查看

{
  "name": "webpack-css",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

3，對環境進行配置

plugins

HtmlWebpackPlugin

js文件引入到html文件中需要手動，但是使用該插件，可以自動引入到html文件中

需要實例化，在plugins中進行配置

 const HtmlWebpackPlugin = require('html-webpack-plugin');
 plugins: [
    // 自動將依賴注入 html 模板，并輸出最終的 html 文件到目標文件夾
    new HtmlWebpackPlugin({
      //在dist文件下成為打包生成的文件
      filename: 'index.html',
      //源文件，一起作為模板
      template: './src/index.art',
      //要引入的文件，在entry里面的js文件的名稱
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      filename: 'list.html',
      template: './src/list.art',
      chunks: ['list']
    })
  ]

環境進行配置 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//css用link的方式引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // loader: 'css-loader'
        // use: ['style-loader', 'css-loader']
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [ 
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};

4，運行

通過命令行

npm run webpeck

以上就是關于“webpack怎么打包CSS”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。