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

成都網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站制作等服務(wù)項(xiàng)目。核心團(tuán)隊(duì)均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗(yàn)，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：生料攪拌車等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗(yàn)，同時(shí)也獲得了客戶的一致贊美！

1，要打包的文件，和引入的模板文件準(zhǔn)備

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

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

import './index.css'

2，環(huán)境搭建

npm init =》項(xiàng)目搭建環(huán)境的初始化

初始化就會(huì)自動(dòng)生成webpack.json和node_modules包安裝的文件。

再在環(huán)境中安裝包

1）基本的webpack包的安裝

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

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

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

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

識(shí)別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，對(duì)環(huán)境進(jìn)行配置

plugins

HtmlWebpackPlugin

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

需要實(shí)例化，在plugins中進(jìn)行配置

 const HtmlWebpackPlugin = require('html-webpack-plugin');
 plugins: [
    // 自動(dòng)將依賴注入 html 模板，并輸出最終的 html 文件到目標(biāo)文件夾
    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']
    })
  ]

環(huán)境進(jìn)行配置 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，運(yùn)行

通過(guò)命令行

npm run webpeck

以上就是關(guān)于“webpack怎么打包CSS”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：webpack怎么打包CSS
網(wǎng)站鏈接：http://www.chinadenli.net/article8/pisgop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、軟件開(kāi)發(fā)、響應(yīng)式網(wǎng)站、微信小程序、定制開(kāi)發(fā)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)