虽然已经2019年了，有些项目还是需要使用jquery，但是考虑到使用jquery的兼容性问题，为了顺利使用ES6进行代码研究，使用webpack+babel打包代码放出几个关键点：1.In为了分块加载模块不至于一个js文件太大，一个页面使用了多个js文件2.由于是多页面项目（多个html），每个页面使用的js文件不一致。基于以上两点，需要配置Multipleentryfiles。3、小图片会转成base64，所以css转出来的js文件可能比较大，所以css文件都设置了单独的入口js。比如我们有三个页面：index,share,assist页面有一个公共的css文件：common.css在设置入口文件的时候，可以这样设置入口：{//公共csscommoncss: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和协助。css.jsindex.css.js如下import'../css/index.css';是的，一句话打包的js文件的大小取决于引入多少小图，一般是几百KB然后是三张webpack插件constHtmlWebpackPlugin=require('html-webpack-plugin');constCopyWebpackPlugin=require('copy-webpack-plugin');constjquery=require('jquery');HtmlWebpackPlugin用于打包多个html文件CopyWebpackPlugin用于img标签，后面jquery就是jquery，全局引用webpack.config.js中的插件，配置如下plugins:[newwebpack.ProvidePlugin({$:"jquery"}),newCopyWebpackPlugin([{from:__dirname+'/src/public/'}]),//直接将src下public文件夹的内容全部复制到dist（输出目录）newHtmlWebpackPlugin({filename:'index.htm',template:'src/index.html',chunks:['commoncss','indexcss','index'],inject:'true',hash:true,}),newHtmlWebpackPlugin({文件名:'share.htm',template:'src/share.html',chunks:['commoncss','sharecss','share'],inject:'true',hash:true,}),newHtmlWebpackPlugin({filename:'assist.htm',template:'src/assist.html',chunks:['commoncss','assistcss','assist'],inject:'true',hash:true,})]src下directory文件如下：index.jsassist.jsshare.js分别是三个文件的入口文件index.htmlassist.htmlshare.html是三个文件的模板，html代码可以写在这里（当然也可以使用模板文件的，只要HtmlWebpackPlugin插件支持即可）dist文件夹如下（为什么是htm而不是html，是为了方便读者区分模板文件和输出文件）我们知道在HtmlWebpackPlugin的模板中webpack打包是不会打包img标签下的图片的，所以在html中使用img标签的图片一定要放在public文件夹下。CopyWebpackPlugin组件会直接将图片复制过去。关于HtmlWebpackPlugin的具体参数可以在网上搜索到。这方面还有很多其他的内容，比如loader和babel，不是本文的重点，就不在赘述了。最后附上webpack.config.js文件letactName='yourProjectName';//letactKV={name:actName,entry:{//generalcsscommoncss:path.resolve(__dirname,'./src/css/common.css.js'),//主页面indexcss:path.resolve(__dirname,'./src/css/index.css.js'),index:path.resolve(__dirname,'./src/index.js'),//分享页面1sharecss:path.resolve(__dirname,'./src/css/share.css.js'),share:path.resolve(__dirname,'./src/share.js'),//分享页2assistcss:path.resolve(__dirname,'./src/css/assist.css.js'),辅助:path.resolve(__dirname,'./src/assist.js'),}};返回{entry:actKV.entry,target:"web",output:{path:path.resolve(__dirname+'/dist/'+actName),//publicPath:'.\\',filename:'js/[name].js',//chunkFilename:"[name].chunk.[hash].js",},plugins:[newwebpack.ProvidePlugin({$:"jquery"}),newCopyWebpackPlugin([{from:__dirname+'/src/public/'}]),newHtmlWebpackPlugin({文件名:'index.htm',模板:'src/index.html',块:['commoncss','indexcss','index']，注入：“真”，hash:true,}),newHtmlWebpackPlugin({filename:'share.htm',template:'src/share.html',chunks:['commoncss','sharecss','share'],注入:'true',hash:true,}),newHtmlWebpackPlugin({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:{别名：{}，扩展：['.js'，'.less'，'.css'，'.vue'，'.jsx']，}，外部：{}，模块：{规则：[{测试：/\.vue$/,loader:'vue-loader',},{test:/\.js$/,包括：path.join(__dirname,'/src'),exclude:path.resolve(__dirname,'node_modules'),使用:[{loader:'babel-loader',query:{presets:['es2015']}}]},{test:/\.xml$/,loader:"xml-loader"},{test:/\.(css|less)$/,loader:"style-loader!css-loader",},{测试:/\.(png|jpg|jpeg|gif|icon|webp)$/,loader:'url-loader',options:{limit:16384,name:'images/[name].[hash:5].[ext]',}},{测试:/\.(woff|woff2|svg|eot|ttf)\??.*$/,loader:"file-loader?&name=assets/fonts/[name].[ext]"},{test:/\.txt$/,loader:"text-loader"},{test:/\.jsx$/,排除:/node_modules/,loaders:['jsx-loader','babel-loader']}]},}
