雖然已經(jīng)2019年了
不過有一些項目
還是需要用到j(luò)query的
不過考慮到使用jquery的一堆兼容性問題
也為了可以順利地使用ES6來擼代碼
研究使用webpack+babel打包代碼來發(fā)布

幾個重點：

1.為了將模塊分割加載，不至于一個js文件過大，一個頁面中使用多個js文件
2.由于是多頁項目（多個html），每個頁面使用的js文件都不一致
基于以上兩點，需要配置多個入口文件
3.會把小圖片轉(zhuǎn)換成base64，所以可能css轉(zhuǎn)成的js文件會比較大，所以css文件都單獨設(shè)置入口js

例如，我們有三個頁面：index、share、assist

三個頁面有通用的css文件：common.css

設(shè)置入口文件時，可以這樣設(shè)置

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文件結(jié)束

由于會有一些圖片的base64，所以大小大約100+KB

類似的還有index.css.js和share.css.js和assist.css.js
index.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標(biāo)簽，后面說

jquery 就是jquery，全局引用

webpack.config.js里的plugins配置如下

plugins: [  new webpack.ProvidePlugin({    $:"jquery"  }),  new CopyWebpackPlugin([{    from: __dirname + '/src/public/'  }]), // 吧src下public文件夾下的所有內(nèi)容直接拷貝到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,  })]