webpack4打包多個css的兩種方法

demo目錄：

 

1.將css打包到js內部

配置文件./conf/webpack.dev.js:

const path = require("path");
module.exports = {
mode: "development", //打包為開發模式
entry: "./src/main", //入口文件,從項目根目錄指定
output: { //輸出路徑和文件名，使用path模塊resolve方法將輸出路徑解析為絕對路徑
path: path.resolve(__dirname, "../dist/js"), //將js文件打包到dist/js的目錄
filename: "main.js" 
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader:"style-loader" },
{ loader:"css-loader" }
]
}
]
}
}

 

安裝style-loader和css-loader，css-loader用於解析css，style-loader用於將css插入html文檔中

npm install style-loader css-loader --save-dev
打包：

webpack --config=conf/webpack.dev.js
2.將css打包成單獨的css文件

2.1.使用extract-text-webpack-plugin插件

安裝extract-text-webpack-plugin，加上@next安裝該插件的最新版，現版本不適用

npm install --save-dev extract-text-webpack-plugin@next
在項目目錄下安裝webpack-cli和webpack

npm install webpack webpack-cli
如果打包的時候以下錯誤，說明漏掉這一步：

ming@ming-TM1604:/home/wwwroot/ming/wb2$ webpack --config=conf/webpack.dev.js
/usr/local/lib/node_modules/webpack-cli/bin/cli.js:244
throw err;
^

Error: Cannot find module 'webpack/lib/Chunk'
at Function.Module._resolveFilename (module.js:543:15)
at Function.Module._load (module.js:470:25)
at Module.require (module.js:593:17)
配置文件./conf/webpack.dev.js:

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");
module.exports = {
mode: "development", //打包為開發模式
entry: "./src/main", //入口文件,從項目根目錄指定
output: { //輸出路徑和文件名，使用path模塊resolve方法將輸出路徑解析為絕對路徑
path: path.resolve(__dirname, "../dist/js"), //將js文件打包到dist/js的目錄
filename: "main.js" 
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("../css/styles.css") //默認其實目錄問打包后的入口文件路徑，所以需要../
]
}

 

打包完成后會在dist目錄下生成css/styles.css文件

注：由於與webpack4兼容性問題，打包會提示Entrypoint undefined = extract-text-webpack-plugin-output-filename

2.2.使用mini-css-extract-plugin插件

配置文件./conf/webpack.dev.js:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
mode: "development", //打包為開發模式
entry: "./src/main", //入口文件,從項目根目錄指定
output: { //輸出路徑和文件名，使用path模塊resolve方法將輸出路徑解析為絕對路徑
path: path.resolve(__dirname, "../dist/js"), //將js文件打包到dist/js的目錄
filename: "main.js" 
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true
}
},
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "../css/styles.css" //如果需要將css文件單獨放入css文件夾中需要../
}) 
]
}

 

打包完成后也會在dist目錄下生成css/styles.css文件
————————————————
版權聲明：本文為CSDN博主「騎着代碼去流浪」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_36185028/article/details/81120276