共计 4424 个字符，预计需要花费 12 分钟才能阅读完成。
虽然已经 2019 年了不过有一些项目还是需要用到 jquery 的不过考虑到使用 jquery 的一堆兼容性问题也为了可以顺利地使用 ES6 来撸代码研究使用 webpack+babel 打包代码来发布
几个重点：1. 为了将模块分割加载，不至于一个 js 文件过大，一个页面中使用多个 js 文件 2. 由于是多页项目（多个 html），每个页面使用的 js 文件都不一致基于以上两点，需要配置多个入口文件 3. 会把小图片转换成 base64，所以可能 css 转成的 js 文件会比较大，所以 css 文件都单独设置入口 js
例如，我们有三个页面：index、share、assist 三个页面有通用的 css 文件：common.css 设置入口文件时，可以这样设置
entry: {
// 通用 css
commoncss: path.resolve(__dirname, ‘./src/css/common.css.js’),
// 主页
indexcss: path.resolve(__dirname, ‘./src/css/index.css.js’),
index: path.resolve(__dirname, ‘./src/index.js’),
// 页 1
sharecss: path.resolve(__dirname, ‘./src/css/share.css.js’),
share: path.resolve(__dirname, ‘./src/share.js’),
// 页 2
assistcss: path.resolve(__dirname, ‘./src/css/assist.css.js’),
assist: path.resolve(__dirname, ‘./src/assist.js’),
}
其中，common.css.js 文件中，只有几行代码
import ‘../css/base.css’;
import ‘../css/plugin.css’;
import ‘../css/common.css’;
common.css.js 文件结束由于会有一些图片的 base64，所以大小大约 100+KB
类似的还有 index.css.js 和 share.css.js 和 assist.css.jsindex.css.js 如下
import ‘../css/index.css’;
对，就一句话打包出来的 js 文件大小就看引入了多少小图片了，一般几百 KB
然后，要使用三个 webpack 的插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const CopyWebpackPlugin = require(‘copy-webpack-plugin’);
const jquery = require(‘jquery’);
HtmlWebpackPlugin 用于打包出多个 html 文件 CopyWebpackPlugin 用于 img 标签，后面说 jquery 就是 jquery，全局引用
webpack.config.js 里的 plugins 配置如下
plugins: [
new webpack.ProvidePlugin({
$:”jquery”
}),
new CopyWebpackPlugin([{
from: __dirname + ‘/src/public/’
}]), // 吧 src 下 public 文件夹下的所有内容直接拷贝到 dist(输出目录) 下
new HtmlWebpackPlugin({
filename: ‘index.htm’,
template: ‘src/index.html’,
chunks: [‘commoncss’, ‘indexcss’, ‘index’],
inject: ‘true’,
hash: true,
}),
new HtmlWebpackPlugin({
filename: ‘share.htm’,
template: ‘src/share.html’,
chunks: [‘commoncss’, ‘sharecss’, ‘share’],
inject: ‘true’,
hash: true,
}),
new HtmlWebpackPlugin({
filename: ‘assist.htm’,
template: ‘src/assist.html’,
chunks: [‘commoncss’, ‘assistcss’, ‘assist’],
inject: ‘true’,
hash: true,
})
]
src 目录下的文件如下
index.js assist.js share.js 是三个文件分别的入口文件 index.html assist.html share.html 是三个文件的模板，html 代码可以写在这里（当然想用模板文件也是可以的，只要 HtmlWebpackPlugin 插件支持）
dist 文件夹如下
（为什么是 htm 而不是 html，是为了便于读者区分模板文件和输出文件）
我们知道，webpack 打包不会打包 HtmlWebpackPlugin 的 template 里的 img 标签下的图片，所以在 html 里使用了 img 标签的图片都要放在 public 文件夹下，CopyWebpackPlugin 这个组件会直接把图片复制过去
关于 HtmlWebpackPlugin 的具体参数的细则可以上网搜一下，很多这方面的内容其他的比如 loader、babel 不在这篇文章想说的重点之列，不赘述
最后，附上 webpack.config.js 文件
let actName = ‘yourProjectName’;//
let actKV = {
name: actName,
entry: {
// 通用 css
commoncss: path.resolve(__dirname, ‘./src/css/common.css.js’),
// 主页
indexcss: path.resolve(__dirname, ‘./src/css/index.css.js’),
index: path.resolve(__dirname, ‘./src/index.js’),
// 分享页 1
sharecss: path.resolve(__dirname, ‘./src/css/share.css.js’),
share: path.resolve(__dirname, ‘./src/share.js’),
// 分享页 2
assistcss: path.resolve(__dirname, ‘./src/css/assist.css.js’),
assist: path.resolve(__dirname, ‘./src/assist.js’),
}
};
return {
entry: actKV.entry,
target: “web”,
output: {
path: path.resolve(__dirname + ‘/dist/’+actName),
// publicPath: ‘.\\’,
filename: ‘js/[name].js’,
// chunkFilename: “[name].chunk.[hash].js”,
},
plugins: [
new webpack.ProvidePlugin({
$:”jquery”
}),
new CopyWebpackPlugin([{
from: __dirname + ‘/src/public/’
}]),
new HtmlWebpackPlugin({
filename: ‘index.htm’,
template: ‘src/index.html’,
chunks: [‘commoncss’, ‘indexcss’, ‘index’],
inject: ‘true’,
hash: true,
}),
new HtmlWebpackPlugin({
filename: ‘share.htm’,
template: ‘src/share.html’,
chunks: [‘commoncss’, ‘sharecss’, ‘share’],
inject: ‘true’,
hash: true,
}),
new HtmlWebpackPlugin({
filename: ‘assist.htm’,
template: ‘src/assist.html’,
chunks: [‘commoncss’, ‘assistcss’, ‘assist’],
inject: ‘true’,
hash: true,
})
],
mode: ‘development’,
node: {
__filename: true,
__dirname: true
},
devtool: isProduction ? ‘source-map’:’inline-source-map’,
devServer:{
inline: true,
open: true,
historyApiFallback: true,
// host: ip.address(),
host: ‘localhost’,
progress: true,
contentBase: “./dist/”,
port: 3430,
historyApiFallback:true,
publicPath:’/src/’,
proxy: {
‘*’: {
target: ‘http://127.0.0.1:3430’,
secure: false
}
},
},
resolve: {
alias: {
},
extensions: [‘.js’, ‘.less’, ‘.css’, ‘.vue’, ‘.jsx’],
},
externals: {
},
module: {
rules: [{
test: /\.vue$/,
loader: ‘vue-loader’,
}, {
test: /\.js$/,
include: path.join(__dirname,’/src’),
exclude: path.resolve(__dirname, ‘node_modules’),
use:[
{
loader: ‘babel-loader’,
query: {
presets: [‘es2015’]
}
}
]
}, {
test: /\.xml$/,
loader: “xml-loader”
}, {
test: /\.(css|less)$/,
loader: “style-loader!css-loader”,
},
{
test: /\.(png|jpg|jpeg|gif|icon|webp)$/,
loader: ‘url-loader’,
options: {
limit: 16384,
name: ‘images/[name].[hash:5].[ext]’,
}
},
{
test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
loader: “file-loader?&name=assets/fonts/[name].[ext]”
}, {
test: /\.txt$/,
loader: “text-loader”
},{
test: /\.jsx$/,
exclude: /node_modules/,
loaders: [‘jsx-loader’, ‘babel-loader’]
}]
},
}
