首頁 > 開發者 > JavaScript

webpack配置的最佳實務分享，webpack最佳實務

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

webpack配置的最佳實務分享，webpack最佳實務

本文主要介紹了關於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.htmlmodule.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最佳配置的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流，謝謝大家對幫客之家的支援。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More