一：目錄結構

二：webpack.config.js的配置

const path = require('path');module.exports = {mode:'development',entry:{app:'./src/app.js'},output:{path:path.resolve(__dirname,'dist'),publicPath:'./dist/',//設置引入路徑在相對路徑filename:'[name].bundle.js'},module:{rules:[{ test: /\.css$/,use:[{loader:'style-loader'//style-loader作用：主要創建style標簽，把css插入html代碼中。<style></style>//如果想要插入link標簽，去引入css的話，使用style-loader/url。<link href="path/to/file.css" rel="stylesheet">},{loader:'css-loader'//css-loader先執行，放在后面的先執行。//css-loader作用：解決import css的問題，把css代碼打包到js代碼里面。一般情況下，css不能使用import導入//file-loader作用：可以把css和js分別打包成兩個文件。}]}]} }

三：其他文件配置

//app.js import './css/base.css'

到這里，一個正常的打包css過程就完成了。下面介紹一個這些loader的屬性，讓我們的使用更靈活。

四：style-loader/useable

//app.js import base from './css/base.css' import common from './css/common.css'base.use();//渲染base.css common.unuse();//不渲染common.css//webpack.config.js 修改loader loader:'style-loader/useable'

五：style-loader的實現原理

//簡易的style-loader實現
//將css插入到head標簽內部 module.exports = function (source) {let script = (`let style = document.createElement("style");style.innerText = ${JSON.stringify(source)};document.head.appendChild(style);`);return script; } //使用方式1 resolveLoader: {modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')] }, {test: /\.css$/,use: ['style-loader'] }, //使用方式2 將自己寫的loaders發布到npm倉庫,然后添加到依賴,按照方式1中的配置方式使用即可

六：css-loader的實現原理（待完善）

七：提取css：ExtractTextWebpackPlugin

八：更強大的處理css代碼的loader：postcss

九：怎么開發一個新的loader？

?

轉載于:https://www.cnblogs.com/weihuan/p/9642475.html

總結

以上是生活随笔為你收集整理的The way of Webpack learning (IV.) -- Packaging CSS（打包css）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。