const webpack = require('webpack');
const path = require('path');
/**
* Plugin that simplifies creation of HTML files to serve your bundles
* npm i --save-dev html-webpack-plugin
* @type {HtmlWebpackPlugin}
*/
const HtmlWebpackPlugin = require('html-webpack-plugin');
/**
* A webpack plugin to remove/clean your build folder(s) before building
* npm i clean-webpack-plugin --save-dev
* @type {CleanWebpackPlugin}
*/
const CleanWebpackPlugin = require('clean-webpack-plugin');
/**
* 提取css到單獨文件
* npm install --save-dev mini-css-extract-plugin
*/
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/**
* css 壓縮 會清除css中註釋
* npm install --save-dev optimize-css-assets-webpack-plugin
*/
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
/**
* js 壓縮
* npm install uglifyjs-webpack-plugin --save-dev
*/
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
mode: 'production',
/**
* entry 輸入文件
*/
entry: {
/**
* common 自定義公共文件
* common: ['./commons/a.js', "./commons/b.js"],
*/
common: [],
/**
* app 主文件
*/
app: './main.js',
},
/**
* 打包輸出
*/
output: {
/**
* publicPath
* 生成如下鏈接
* <script type="text/javascript" src="/cx/tpl/Support/search/dist/build.js">
*/
publicPath: '/cx/tpl/Support/search/dist/',
/**
* [name] 指向entry 的key 也就是 app
*/
filename: '[name].js',
path: path.resolve(__dirname, 'dist/'),
},
plugins: [
/**
* 打包HTML
*/
new HtmlWebpackPlugin({
title: 'Output Management',
/**
* template 指定要打包的原文件
*/
template: './online.html'
}),
/**
* 由 webpack 生成的文件或目錄才能被 CleanWebpackPlugin 刪除
* 下面配置的是 打包前 需要被刪除的目錄
*/
new CleanWebpackPlugin(['dist', 'build']),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
// new webpack.optimize.DedupePlugin(),
/**
* 提取SourceMap到獨立文件
*/
new webpack.SourceMapDevToolPlugin({
filename: '[name].js.map',
// exclude: ['vendor.js']
})
],
/**
* devtool 調試工具,用來追蹤被打包前源文件的錯誤
* 關閉可減少打包文件的大小
*/
// devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.js?$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/react']
}
}
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../'
}
},
"css-loader"
]
}
]
},
optimization: {
/**
* 分包
*/
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
},
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
/**
* sourceMap 和 devtool: 'inline-source-map', 衝突
*/
sourceMap: false, // set to true if you want JS source maps,
/**
* extractComments 導出備註
*/
extractComments: 'all'
}),
new OptimizeCSSAssetsPlugin({})
]
}
};
webpack4完全配置(js分組打包分模塊打包壓縮提取備註和css壓縮打包)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.