详解如何使用webpack打包多页jquery项目
虽然已经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.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标签,后面说
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 "./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)\"file-loader" }, { test: /\.txt$/, loader: "text-loader" },{ test: /\.jsx$/, exclude: /node_modules/, loaders: ['jsx-loader', 'babel-loader'] }] }, }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:详解Vue中watch对象内属性的方法