一：目录结构
二：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.jsimport ‘./css/base.css‘
到这里，一个正常的打包css过程就完成了。下面介绍一个这些loader的属性，让我们的使用更灵活。
四：style-loader/useable
//app.jsimport base from ‘./css/base.css‘import common from ‘./css/common.css‘base.use();//渲染base.csscommon.unuse();//不渲染common.css//webpack.config.js 修改loaderloader:‘style-loader/useable‘
五：style-loader的实现原理（待完善）
六：css-loader的实现原理（待完善）
七：提取css：ExtractTextWebpackPlugin
八：更强大的处理css代码的loader：postcss
The way of Webpack learning (IV.) -- ?Packaging CSS（打包css）
原文地址：https://www.cnblogs.com/weihuan/p/9642475.html