webpack怎么不打包index的css

发布网友发布时间：2022-04-21 09:12

共1个回答

热心网友时间：2022-04-21 10:41

打包一个文件，只需要常规的在入口的js文件引用 css文件即可，打包成多个CSS文件，可以设置多个CSS入口，让webpack用 loader去打包。和分割单独打包js文件一样。下面有两个例子。【例子来源】

// 使用webpack 打包单独的postcss语法的css文件
/* webpack.config.js */
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
mole.exports = {
entry: './【path】/index.js',
/* index.js 里 require('./【name】.css');就好我在看看文档是不是直接不用引入js文件 */
output: {
filename: 'index.js'
},
mole: {
loaders: [{
test: /\.css$/,
loader: Ex.extract('style-loader', 'css-loader!postcss-loader') /*这里的写法注意下 */
}]
},
postcss: function() {
return [autoprefixer, cssnext, precss, cssnano]
},
plugins: [
new Ex("【name】.css")
]
}
//////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////
// 使用webpack 打包单独的多个postcss语法的css文件
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
var webpack = require('webpack');

mole.exports = {
entry: {
ac1: './src/actother.css',
ac2: './src/index.css'
},
output: {
filename: "[name].css"
},
mole: {
loaders: [{
test: /\.css$/,
loader: Ex.extract('style-loader', 'css-loader!postcss-loader')
}]
},
postcss: function() {
return [autoprefixer, precss, cssnano, cssnext]
},
plugins: [
new Ex('[name].css')
]