mini-css-extract-plugin 抽离css打包import不输出css
参考webpack4 mini-css-extract-plugin production模式不输出css
- 将引入的样式使用require的时候 打包可以打包出来, import不可以
- 我引入的是
但是打包出来的是
这个名字怎么变了呢?
webpack.base.config.js
`
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
entry: {
// 配置文件的入口
main: path.resolve(__dirname, '../src/main.js'),
// 将不变的代码分开打包
framework:['react','react-dom']
},
output: {
// 打包文件的出口
path: path.resolve(__dirname, '../dist'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader' // 将代码与babel联系起来
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
},
// postcss-loader autoprefixer 用于添加css3前缀
{
test: /\.(sass|scss)$/,
use: [
// css抽离
{
loader: MiniCssExtractPlugin.loader,
options: {
// only enable hot in development
hmr: process.env.NODE_ENV === 'development',
// if hmr does not work, this is a forceful method.
reloadAll: true,
},
},
{
loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
options: {
importLoaders: 2, // 识别在sass文件中的引用的sass文件,防止不通过sassloader直接走cssloader
modules: true,
localIdentName: '[local]--[hash:base64:8]'
}
},
{
loader: "sass-loader" // 将 Sass 编译成 CSS
},
'postcss-loader'
]
},
{
test: /\.css$/,
use: [
// css抽离
{
loader: MiniCssExtractPlugin.loader,
options: {
// only enable hot in development
hmr: process.env.NODE_ENV === 'development',
// if hmr does not work, this is a forceful method.
reloadAll: true,
},
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
// 指定一个html 模板
template: path.resolve(__dirname, '../public/index.html'),
title: '谋动|谋定而后动',
inject: "body",
favicon: path.resolve(__dirname, '../public/favicon.ico'),
// html 文件的压缩
minify: {
//是否去除空格,默认false
collapseWhitespace: true,
//是否移除注释 默认false
removeComments: true,
//是否对大小写敏感,默认false
caseSensitive: true
}
}),
// css抽离
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : 'css/[name].[hash].css',
chunkFilename: devMode ? '[id].css' : 'css/[id].[hash].css',
})
],
optimization: {
}
}
`
打包出来名字是 main.css 因为你 entry 处做了代码切分,是正常现象。至于 import 不出问题,没遇到过。