提取css的app.min.css
来源:3-13 由浅入深 webpack - 处理 CSS - 提取 CSS

kumayato
2018-09-26
按照老师提取css的步骤来的,为什么打包出来的app.min.css里面下面多了一串js的代码。
下面是我webpack config的配置
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// style-loader/url css样式会以link标签的形式插入
// style-loader/useable 使用或者不使用某个样式
module.exports = {
mode: 'development',
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/',
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: {
loader: 'style-loader',
options: {
singleton: true
}
},
use: [{
loader: 'css-loader',
options: {
minimize: true,
modules: true,
// CSS module 打包出来的class名规则
localIdentName: '[path][name]-[local]-[hash:base64:5]'
},
},
{
loader: 'less-loader'
}
]
})
}]
},
plugins: [
new ExtractTextPlugin({
filename : '[name].min.css',
allChunks: false
})
]
}
打包出来的css文件,下面多了一些js,不知道是为什么。
写回答
1回答
-
extract-text-webpack-plugin 和新版本的不匹配,我升级webpack 4 以后也碰到了这样的问题,把extract-text-webpack-plugin 换成官方新出的 mini-css-extract-plugin 就可以了
012018-09-29
相似问题