原本想按照网上的一些教程去做的, 但是, webpack4.0 去除掉了默认的js压缩插件, 或者说, 名字改掉了
我的优化方法如下(还可以再优化,后面再更新):
webpack4.0 以前的版本可以直接用: extract-text-webpack-plugin
webpack4.0之后的版本要加上: extract-text-webpack-plugin@next
extract-text-webpack-plugin :
某类型文件( 如: .less/.sass/.css)合并成一个文件 , 并从js分离
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const webpackUglifyJsPlugin = require('uglify-js-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
module.exports = {
entry: [
'babel-polyfill', path.resolve(__dirname, 'src/index.js')
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/i,
use: [
{
loader: 'babel-loader',
options: {
"presets": ["env", "react", "stage-2"]
}
}
],
exclude: /node_modules/
}, {
test: /\.css$/i,
use: extractCSS.extract({
fallback: 'style-loader',
use: ['css-loader']
})
}, {
test: /\.less$/i,
use: extractLESS.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
})
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({title: 'manage', filename: "index.html", inject: 'body'}),
new UglifyJsPlugin({
parallel: 4,
uglifyOptions: {
output: {
comments: false,
beautify: false
},
compress: {},
warnings: false
},
cache: true
}),
extractLESS,
extractCSS
]
};
网友评论