โซลูชัน webpack 4 พร้อมปลั๊กอิน mini-css-extract
ทีมงาน webpack แนะนำให้ใช้ mini-css-extract บนปลั๊กอิน extract text
โซลูชันนี้ช่วยให้คุณสามารถสร้างกลุ่มแยกต่างหากที่มีเฉพาะรายการ css ของคุณ:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
function recursiveIssuer(m) {
if (m.issuer) {
return recursiveIssuer(m.issuer);
} else if (m.name) {
return m.name;
} else {
return false;
}
}
module.exports = {
entry: {
foo: path.resolve(__dirname, 'src/foo'),
bar: path.resolve(__dirname, 'src/bar'),
},
optimization: {
splitChunks: {
cacheGroups: {
fooStyles: {
name: 'foo',
test: (m, c, entry = 'foo') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
barStyles: {
name: 'bar',
test: (m, c, entry = 'bar') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
นี่คือตัวอย่างที่ออกแบบเพิ่มเติมโดยใช้รายการหลายรายการจากโครงการส่วนตัวของฉัน:
const ManifestPlugin = require('webpack-manifest-plugin')
const webpack = require('webpack')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VENDOR = path.join(__dirname, 'node_modules')
const LOCAL_JS = path.join(__dirname, 'app/assets/js')
const LOCAL_SCSS = path.join(__dirname, 'app/assets/scss')
const BUILD_DIR = path.join(__dirname, 'public/dist')
const EXTERNAL = path.join(__dirname, 'public/external')
function recursiveIssuer(m) {
if (m.issuer) {
return recursiveIssuer(m.issuer);
} else if (m.name) {
return m.name;
} else {
return false;
}
}
module.exports = {
entry: {
vendor: [
`${VENDOR}/jquery/dist/jquery.js`,
`${VENDOR}/codemirror/lib/codemirror.js`,
`${VENDOR}/codemirror/mode/javascript/javascript.js`,
`${VENDOR}/codemirror/mode/yaml/yaml.js`,
`${VENDOR}/zeroclipboard/dist/ZeroClipboard.js`,
],
app: [
`${LOCAL_JS}/utils.js`,
`${LOCAL_JS}/editor.js`,
`${LOCAL_JS}/clipboard.js`,
`${LOCAL_JS}/fixtures.js`,
`${LOCAL_JS}/ui.js`,
`${LOCAL_JS}/data.js`,
`${LOCAL_JS}/application.js`,
`${LOCAL_JS}/google.js`
],
'appStyles': [
`${EXTERNAL}/montserrat.css`,
`${EXTERNAL}/icons.css`,
`${VENDOR}/purecss/pure-min.css`,
`${VENDOR}/purecss/grids-core-min.css`,
`${VENDOR}/purecss/grids-responsive-min.css`,
`${VENDOR}/codemirror/lib/codemirror.css`,
`${VENDOR}/codemirror/theme/monokai.css`,
]
},
optimization: {
splitChunks: {
cacheGroups: {
appStyles: {
name: 'appStyles',
test: (m, c, entry = 'appStyles') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
},
},
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [ 'script-loader'],
},
{
test: /\.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
],
},
mode: 'development',
resolve: {
extensions: ['.js', '.css', '.scss']
},
output: {
path: BUILD_DIR,
filename: "[name].[chunkhash].js",
},
plugins: [
new ManifestPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
]
};
ฉันตระหนักดีว่าวิธีนี้ไม่ใช่แบบแยกส่วนมากนัก แต่ควรให้พื้นฐานในการสร้างและเป็นกลยุทธ์ที่ยอดเยี่ยมสำหรับการนำ webpack มาใช้ในโครงการที่คุณไม่ต้องการใช้ javascript และ css ผสมกัน
downside แนวทางนี้ก็คือว่า CSS-loader ยังคงสร้างไฟล์จาวาสคริปต์เพิ่มเติม (ไม่ว่าคุณเลือกที่จะใช้มันหรือไม่) นี้จะคาดคะเนได้รับการแก้ไขใน webpack 5
ฉันควรใช้ webpack สำหรับเนื้อหาที่ไม่ใช่ JS ด้วยซ้ำหรือไม่ถ้าฉันจะไม่ผสมมันลงใน JS ของฉัน
ฉันไม่เห็นอะไรผิดปกติกับสิ่งนี้ แต่สุดท้ายแล้วมันขึ้นอยู่กับความอดทนของคุณในการจัดการระบบบิลด์หลายระบบ สำหรับฉันแล้วสิ่งนี้ให้ความรู้สึกเหมือน overkill ดังนั้นความชอบของฉันคือการคงอยู่ในระบบนิเวศของ webpack
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับกลยุทธ์ที่ระบุไว้ข้างต้นโปรดดูhttps://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entry