Skip to content

Instantly share code, notes, and snippets.

@annaliahsiao

annaliahsiao/webpack.bundle.js

Last active November 22, 2019 07:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save annaliahsiao/03bf0e42c1e13dfb3b5ec3cfdb074bf5 to your computer and use it in GitHub Desktop.
Save annaliahsiao/03bf0e42c1e13dfb3b5ec3cfdb074bf5 to your computer and use it in GitHub Desktop.
Download ZIP
my webpack.config.js setting
Raw
webpack.bundle.js
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
module.exports = webpackMerge(commonConfig, {
mode: 'production',
optimization: {
minimize: false,
runtimeChunk: {
name: 'runtime'
},
splitChunks: {
chunks: 'all',
name: true,
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'common',
chunks: 'initial',
enforce: true,
priority: 2,
},
action: {
name: 'action',
chunks: 'initial',
priority: 1,
minChunks: 2,
},
},
},
},
});
Raw
webpack.common.js
const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ASSET_PATH = process.env.ASSET_PATH || '../';
const getEntry = () => {
const entry = {};
glob.sync('./src/js/*.js').forEach((name) => {
const start = name.indexOf('/src/js/') + 8;
const end = name.length - 3;
const eArr = [];
const n = name.slice(start,end);
eArr.push(name);
entry[n] = eArr;
});
return entry;
};
const config = {
entry: getEntry(),
output: {
path: path.resolve(__dirname, './dist'),
filename: './js/[name].js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use:[
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
]
},
{
test: /\.pug$/,
use: [
{
loader: 'html-loader',
options: {
minimize: false // 不壓縮 HTML
}
},
{
loader: 'pug-html-loader',
options: {
pretty: true // 美化 HTML 的編排 (不壓縮HTML的一種)
}
},
]
},
{
test: /\.(sc|sa|c)ss$/,
exclude: /node_modules/,
use: [
'style-loader',
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ASSET_PATH
}
},
{
loader: 'css-loader',
options: {
url: false
}
},
'postcss-loader',
'sass-loader'
]
},
{
test: /\.styl$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ASSET_PATH
}
},
'css-loader',
'postcss-loader',
'stylus-loader'
]
},
{
test: /\.(png|svg|jpg|jpge|gif)$/,
exclude: /node_modules/,
use: {
loader: 'url-loader',
options: {
limit: 8192, //bytes
name: '[name].[ext]?[hash:7]',
outputPath: 'images'
}
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 8192,
// name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
options: {
limit: 8192, //bytes
name: '[name].[ext]?[hash:7]',
}
}
}
]
},
plugins:[
new CleanWebpackPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jQuery",
"window.jQuery": "jquery"
}),
new MiniCssExtractPlugin({
filename: './css/[name].css',
chunkFilename: "./css/[name].css"
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer()
]
}
}),
],
resolveLoader: {
extensions: ['.js', '.styl'],
},
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
},
stats: {
builtAt: false,
children: false,
chunks: false,
modules: false,
timings: false,
version: true // webpack v
},
};
Object.keys(config.entry).forEach((name) => {
config.plugins.push(new HtmlWebpackPlugin({
template:`./src/${name}.pug`,
filename: `${name}.html`,
chunks:['common','runtime','vendor','action',`${name}`],
minify: {
removeComments: false,
collapseWhitespace: false, // 壓縮 HTML
removeAttributeQuotes: false,
},
}));
});
module.exports = config;
Raw
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ASSET_PATH = process.env.ASSET_PATH || '../';
const env = process.env.NODE_ENV;
function port(minNum, maxNum) {
return Math.floor( Math.random() * (maxNum - minNum + 1) ) + minNum;
}
const getEntry = () => {
const entry = {};
glob.sync('./src/js/*.js').forEach((name) => {
const start = name.indexOf('/src/js/') + 8;
const end = name.length - 3;
const eArr = [];
const n = name.slice(start,end);
eArr.push(name);
entry[n] = eArr;
});
return entry;
};
const config = {
entry: getEntry(),
output: {
path: path.resolve(__dirname, './dist'),
filename: './js/[name].js',
},
mode: env || 'development', //請記得設定好package.json的build模式與dev模式載入的開發mode為development或是production
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use:[
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
]
},
{
test: /\.pug$/,
use: [
{
loader: 'html-loader',
options: {
minimize: false // 不壓縮 HTML
}
},
{
loader: 'pug-html-loader',
options: {
pretty: true // 美化 HTML 的編排 (不壓縮HTML的一種)
}
},
]
},
{
test: /\.(sc|sa|c)ss$/,
exclude: /node_modules/,
use: [
'style-loader',
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ASSET_PATH
}
},
{
loader: 'css-loader',
options: {
url: false
}
},
'postcss-loader',
'sass-loader'
]
},
{
test: /\.styl$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ASSET_PATH
}
},
'css-loader',
'postcss-loader',
'stylus-loader'
]
},
{
test: /\.(png|svg|jpg|jpge|gif)$/,
exclude: /node_modules/,
use: {
loader: 'url-loader',
options: {
limit: 8192, //bytes
name: '[name].[ext]?[hash:7]',
outputPath: 'images'
}
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 8192,
// name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
options: {
limit: 8192, //bytes
name: '[name].[ext]?[hash:7]',
}
}
}
]
},
plugins:[
new CleanWebpackPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jQuery",
"window.jQuery": "jquery"
}),
new MiniCssExtractPlugin({
filename: './css/[name].css',
chunkFilename: "./css/[name].css"
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer()
]
}
}),
],
resolveLoader: {
extensions: ['.js', '.vue', '.styl'],
},
resolve: {
alias: {
'vue': 'vue/dist/vue.js',
jquery: "jquery/src/jquery",
}
},
stats: {
builtAt: false,
children: false,
chunks: false,
modules: false,
timings: false,
version: true // webpack v
},
devServer: {
port: port(8000,9000),
open:true,
hot: true,
},
optimization: {
minimize: false,
runtimeChunk: {
name: 'runtime'
},
splitChunks: {
chunks: 'all',
name: true,
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'common',
chunks: 'initial',
enforce: true,
priority: 2,
},
action: {
name: 'action',
chunks: 'initial',
priority: 1,
minChunks: 2,
},
},
},
},
};
Object.keys(config.entry).forEach((name) => {
config.plugins.push(new HtmlWebpackPlugin({
template:`./src/${name}.pug`,
filename: `${name}.html`,
chunks:['common','runtime','vendor','action',`${name}`],
minify: {
removeComments: false,
collapseWhitespace: false, // 壓縮 HTML
removeAttributeQuotes: false,
},
}));
});
module.exports = config;
Raw
webpack.dev.js
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
function port(minNum, maxNum) {
return Math.floor( Math.random() * (maxNum - minNum + 1) ) + minNum;
}
module.exports = webpackMerge(commonConfig, {
mode: 'development',
devServer: {
port: port(8000,9000),
open:true,
hot: true,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment