webpack配置的最佳实践分享
程序员文章站
2022-04-20 23:01:53
本文主要介绍了关于webpack配置的最佳实践,本文分享的实践具有以下的优势:
使用happypack提升打包速度。
使用md5 hash可以生成文件版本,...
本文主要介绍了关于webpack配置的最佳实践,本文分享的实践具有以下的优势:
- 使用happypack提升打包速度。
- 使用md5 hash可以生成文件版本,进行版本控制
- 在非单页面的系统中支持多个入口的配置
- 模板中可以利用htmlplugin输出一些配置性的信息
- 支持devserver,支持本地json数据的mock
一、webpack最佳实践中的需求
1.热加载
2.语法校验
3.js打包
4.模板打包
二、解决方案
1.webpack.config.json
var path = require('path'); var fs = require('fs'); var exec = require('child_process').exec; var happypack = require('happypack'); var merge = require('webpack-merge'); var webpack = require('webpack'); var webpackmd5hash = require('webpack-md5-hash'); var htmlwebpackplugin = require('html-webpack-plugin'); var root_path = path.resolve(__dirname); var app_path = path.resolve(root_path, 'app'); var build_path = path.resolve(root_path, __dirname+'/devserver/public'); //取出页面文件映射 function gethtmlpluginarr() { var data = json.parse(fs.readfilesync('entryconf.json', 'utf-8')); var pagelist = data.pagelist; var resultobj = { "pluginarr": [], "entryobj": {} }; for (var index = 0; index < pagelist.length; index++) { var element = pagelist[index]; var entry = element.entry; //通过对app.json中src的路径截取获得分发路径 var filename = (function () { var filenamestr = entry.split("./app/page/")[1]; return filenamestr.substr(0, filenamestr.lastindexof(".")); })(); var title = element.title; var extra = element.extra; resultobj.entryobj[filename] = entry; //利用路径一部分来进行htmlwebpackplugin的chunks resultobj.pluginarr.push( new htmlwebpackplugin({ chunks: [filename], //当前页面js title: title, extra: extra,//包含页面额外的配置信息 template: "app/" + "template.ejs", filename: 'views/'+filename + '.ejs', chunkssortmode: "dependency"//按chunks的顺序对js进行引入 }) ); //happypack, loader多进程去处理文件 resultobj.pluginarr.push( new happypack({ id: 'html' }), new happypack({ id: 'css' }), new happypack({ id: 'js' }), new happypack({ id: 'tpl' }) ); } return resultobj; } var appjsonobj = gethtmlpluginarr(); /**通用配置 */ var commonconfig = { entry: appjsonobj.entryobj, module: { loaders: [ { test: /\.html$/, loader: "html?minimize=false", happy: {id: "html"} }, { test: /\.json$/, loader: "json" }, { test: /\.scss|\.css$/, loaders: ["style", "css", "sass"], happy: {id: "css"} }, { test: /\.(?:jpg|gif|png)$/, loader: 'url?limit=10240&name=images/[name]-[hash:10].[ext]' }, { test: /\.handlebars/, loader: "handlebars", query: { helperdirs: [app_path + "/helper"] }, happy: {id: "tpl"} }, { test: /\.js$|\.jsx$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015'] }, happy: {id: "js"} }, ] }, output: { path: build_path, filename: "js/[name].js" }, externals: { "jquery": "jquery" }, //配置短路径引用 resolve: { extensions: ['', '.js', '.json', '.scss','.vue'], alias: { vue : 'vue/dist/vue.js' } }, plugins: appjsonobj.pluginarr, cache: true } module.exports = merge(commonconfig, { output: { publicpath: '/', path: build_path, filename: "js/[name]-[chunkhash:10].js" }, plugins: [ new webpack.optimize.uglifyjsplugin({ minimize: true }), new webpackmd5hash() ] });
2.模板文件的配置:
<!doctype html> <html> <head> <meta charset="utf-8"> <title> <%= htmlwebpackplugin.options.title || '上单'%> </title> </head> <body> <div id="main-container"></div> <% if (htmlwebpackplugin.options.extra&&htmlwebpackplugin.options.extra.js) {%> <% for(var i = 0;i < htmlwebpackplugin.options.extra.js.length;i++){ %> <script src="<%= htmlwebpackplugin.options.extra.js[i] %>"></script> <% } %> <% } %> </body> <script src="//cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> </html>
3.webpack.dev.config.json配置
var path = require('path'); var fs = require('fs'); var merge = require('webpack-merge'); var webpack = require('webpack'); var htmlwebpackplugin = require('html-webpack-plugin'); var openbrowserplugin = require('open-browser-webpack-plugin'); var root_path = path.resolve(__dirname); var app_path = path.resolve(root_path, 'app'); var build_path = path.resolve(root_path, 'build'); var module_path = path.resolve(root_path, 'node_modules'); //取出页面文件映射 function gethtmlpluginarr() { var data = json.parse(fs.readfilesync('app/entries.json', 'utf-8')); var pagelist = data.pagelist; var resultobj = { "pluginarr": [], "entryobj": {} }; for (var index = 0; index < pagelist.length; index++) { var element = pagelist[index]; var src = element.entry; //通过对app.json中src的路径截取获得分发路径 var dist = (function() { var s1 = src.split("./app/entries/")[1]; var s2 = s1.substr(0, s1.lastindexof("/")); return s2; })(); var title = element.title; var extra = element.extra; resultobj.entryobj[dist] = src; //利用路径一部分来进行htmlwebpackplugin的chunks resultobj.pluginarr.push( new htmlwebpackplugin({ chunks: [dist], //当前页面js title: title, extra: extra,//包含页面额外的配置信息 template: "app/" + "template.ejs", filename: dist + '.html', chunkssortmode: "dependency" //按chunks的顺序对js进行引入 }) ); } return resultobj; } var appjsonobj = gethtmlpluginarr(); /**通用配置 */ var commonconfig = { entry: appjsonobj.entryobj, module: { loaders: [ { test: /\.html$/, loader: "html?minimize=false" }, { test: /\.json$/, loader: "json" }, { test: /\.scss|\.css$/, loaders: ["style", "css", "sass"] }, { test: /\.(?:jpg|gif|png)$/, loader: 'url?limit=10240&name=../images/[name]-[hash:10].[ext]' }, { test: /\.handlebars/, loader: "handlebars" }, { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015','stage-3','react'] } }, { test: /\.jsx$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['react','stage-3','es2015']} } ] }, output: { path: build_path, filename: "js/[name].js" }, externals: { "jquery": "jquery" }, //配置短路径引用 resolve: { alias: { module: path.resolve(app_path, 'module'), service: path.resolve(app_path, "services"), component: path.resolve(app_path, "components"), entries: path.resolve(app_path, "entries"), routes: path.resolve(app_path, "routes"), node_modules: path.resolve(root_path, 'node_modules') }, extensions: ['', '.js', '.jsx'] }, plugins: appjsonobj.pluginarr, devtool: "cheap-source-map", cache: true } //webpack-dev-server 提供的是内存级别的server,不会生成build的文件夹 //访问路径直接参照build下的路径 如http://127.0.0.1:8080/shop/updateshop.html module.exports = merge(commonconfig, { devserver: { hot: true, inline: true, progress: true, host: process.env.host, port: "8808", proxy: { '/api/getleftbar': { target: 'http://127.0.0.1:8808/mock',//dev secure: false }, '/api/getindexdata': { target: 'http://127.0.0.1:8808/mock',//dev secure: false }, '/api/getblogs': { target: 'http://127.0.0.1:8808/mock',//dev secure: false }, '/panda/*': { target: 'http://10.4.233.139:8411/',//dev secure: false }, //转发至本地mock '/page3/*': { target: 'http://127.0.0.1:8808', secure: false } } }, plugins: [ new webpack.hotmodulereplacementplugin(), new openbrowserplugin({ url: 'http://127.0.0.1:8808/test.html' }) ] });
总结
以上就是关于webpack最佳配置的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
上一篇: 自己搭建实验云主机环境方法步骤
推荐阅读
-
一次Webpack配置文件的分离实战记录
-
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
-
vue webpack开发访问后台接口全局配置的方法
-
iOS ScrollView嵌套tableView联动滚动的思路与最佳实践
-
Windows系统配置python脚本开机启动的3种方法分享
-
webpack4+Vue搭建自己的Vue-cli项目过程分享
-
分享8个最佳的代码片段在线测试网站
-
Nginx中运行PHP框架Laravel的配置文件分享
-
详解一个基于react+webpack的多页面应用配置
-
一键配置CentOS iptables防火墙的Shell脚本分享