我正在尝试创建一个代码,作为我下一个项目的参考。
webpack.config.js:
const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//convert all .scss files in a single file in **dist/css** folder
module.exports = {
entry: './src/sass/main.scss',
output: {
path: path.resolve(__dirname, './dist/css'),
filename: 'styles.css'
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {}
}),
new MiniCssExtractPlugin({
filename: 'cmscore.css'
}),
new UglifyJsPlugin(),
new CompressionPlugin({
test: /\.(js|css)/
})
],
module: {
rules: [{
test: /\.scss$/,
include: [path.resolve(__dirname, './src/sass')],
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
minimize: true,
sourceMap: true
}
}, {
loader: 'sass-loader'
}
],
},
],
},
}
//convert all .js in a single file in **dist/script** folder
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, './dist/scripts'),
filename: 'bundle.js'
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {}
}),
new UglifyJsPlugin(),
new CompressionPlugin({
test: /\.(js|css)/
})
],
module: {
rules: [{
test: /\.js$/,
include: [path.resolve(__dirname, './src/js')],
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
sourceMap: true
}
}]
}],
}
}
我试图将所有代码统一在一个块中(module.exports)
当我尝试运行命令时出错 - npm run dev-server
- 无法转换文件并将其发送到./dist文件夹。我尝试以多种方式格式化webpack.config.js代码。删除:extract-text-webpack-plugin并替换为mini-css-extract-plugin