这是我的文件夹结构:
我想缩小并捆绑我的 src/css
文件夹中的 CSS 文件,并将其输出为 dist
中的单个 CSS 文件。到目前为止,我看到的所有示例都建议在 JS 文件中使用 require
-ing CSS 文件。我不要那个。有没有办法在 webpack.config.js
中配置以缩小和复制这些文件?
最佳答案
成功了。
安装开发依赖
npm i extract-text-webpack-plugin --save-dev
npm i css-loader --save-dev
webpack.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractCSS = new ExtractTextPlugin('bundle.min.css')
module.exports = {
entry: {
'bundle.min.css': [
__dirname + '/src/styles/abc.css',
__dirname + '/src/styles/xyz.css',
__dirname + '/src/styles/mno.css'
]
},
devtool: '',
output: {
path: __dirname + '/dist/styles/',
filename: '[name]'
},
module: {
rules: [{
test: /\.css$/i,
use: extractCSS.extract({
use: {
loader: 'css-loader',
options: {
minimize: true
}
}
})
}]
},
resolve: {
alias: {},
modules: [],
extensions: ['.css']
},
plugins: [
extractCSS
]
};
bundle.min.css
将生成。基于 minimize: true/false
,将决定缩小。享受吧!
关于javascript - 如何将 CSS 文件从源文件夹捆绑并复制到 dist 文件夹?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42836063/