这个webpack配置,怎么优化?
这份配置怎么优化才能速度快,文件小,安全高。?
var path = require('path');
var webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const UglifyJsPlugin=require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
entry: {
app: ["event-source-polyfill", "babel-polyfill", './src/main.js']
},
output: {
path: path.resolve(__dirname, '../backend/static/dist'),
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'jquery-ui': 'jquery-ui/ui/widgets',
'jquery-ui-css': 'jquery-ui/../../themes/base',
'vue$': 'vue/dist/vue.esm.js'
}
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('./node_modules/vuescroll-copy/vuescroll.min.js')]
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
esModule: false,
limit: 10000
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
esModule: false,
limit: 10000
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
esModule: false,
limit: 10000
}
}
]
},
devtool: '#eval-source-map',
devServer: {
historyApiFallback: true,
overlay: true,
proxy: {
'/mock': {
target: "http://localhost:3000",
changeOrigin: true
},
'/%2Fuploads': {
target: "http://localhost:3000",
changeOrigin: true
},
'/uploads': {
target: "http://localhost:3000",
changeOrigin: true
},
'/saveWebPics': {
target: "http://localhost:3000",
changeOrigin: true
}
}
},
plugins: [
new VueLoaderPlugin(),
new webpack.ProvidePlugin({
tools: resolve('/src/assets/common.js'),
$: "jquery",
jQuery: "jquery"
}),
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, '../backend/static/dist/index.html'),
template: './src/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
]
};
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = false;
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new ExtractTextPlugin("bundle.css")
])
module.exports.optimization = {
minimizer: [
new TerserPlugin({
cache: true, // 开启缓存
parallel: true, // 支持多进程
sourceMap: true,
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: false
}
})
]
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论