一、解決什么問題
1、開發環境js、css不壓縮，可在瀏覽器選中代碼除錯
2、開發環境運行http服務指向打包后的檔案夾
3、babel輸出瀏覽器兼容的js代碼
二、需要安裝的包
babel-loader：輸出瀏覽器兼容的js代碼；命令： npm install --save-dev babel-loader @babel/core @babel/preset-env
webpack-dev-server： 快速搭建本地運行環境；命令： npm install webpack-dev-server --save-dev
三、babe-loader配置
1、在webpack.config.js檔案中新增rule，代碼如下：
1 { 2 test: /\.m?js$/, 3 exclude: /(node_modules|bower_components)/,//不包含node_modules、bower_components
4 use: { 5 loader: 'babel-loader', 6 } 7 },
2、在根目錄下新增babel組態檔.babelrc，代碼如下：
1 { 2 "presets": ["@babel/env"] 3 }
四、開發環配置
1、根目錄下新建webpack.dev.conf.js檔案，代碼如下，代碼中有注釋，可根據下面的代碼自己除錯：
1 const path = require("path"); 2 const merge = require("webpack-merge"); 3 const webpackConfigBase = require("./webpack.config.js"); 4 5 6 const webpackConfigDev = { 7 devServer: { 8 contentBase: path.join(__dirname, 'dist'), 9 // publicPath: '/', 10 // host: 'local.pcteam.com.cn', 11 // host: '0.0.0.0' || 'config.dev.host', //手機聯測使用 12 port: '8000', 13 overlay: true, // 瀏覽器頁面上顯示錯誤 14 open: true, // 開啟瀏覽器 15 // stats: "errors-only", //stats: "errors-only"表示只列印錯誤： 16 // hot: true, // 開啟熱更新 17 // inline: true, 18 //服務器代理配置項 19 disableHostCheck: true, 20 proxy: { 21 '/api': { 22 target: 'http://test.pcteam.com.cn', 23 changeOrigin: true, // 如果介面跨域，需要進行這個引數配置 24 secure: false, 25 // pathRewrite: { 26 // '^/files': '' 27 // } 28 //修改服務端回傳的cookie路徑 29 // cookiePathRewrite: { 30 // '///': '///', 31 // }, 32 //修改服務端回傳的cookie domain 33 // cookieDomainRewrite: { 34 // 'unchanged.domain': 'unchanged.domain', 35 // 'pcteam.com': 'local.pcteam.com:8000', 36 // '*': '', 37 // }, 38 }, 39 }, 40 }, 41 plugins: [ 42 //熱更新 hot: true 需要同時配置 43 // new webpack.HotModuleReplacementPlugin(), 44 ], 45 // 生成map格式的檔案，里面包含映射關系的代碼，如果想查看在源檔案中錯誤的位置，則需要使用映射關系，找到對應的位置， 46 devtool: 'source-map', 47 } 48 49 //合并基礎配置和dev配置 50 module.exports = merge(webpackConfigBase, webpackConfigDev)
五、開發環配置
在package.json中找到scripts，進行環境區分和配置：
//正式打包發布 "build":"cross-env webpack --mode=production", //開發環境運行命令 "dev": "cross-env webpack-dev-server --mode=development --config webpack.dev.conf.js" --mode指定當前運行的環境，如果是production環境webpack4.x會對js、css壓縮，如果是development則不壓縮，更多區別請查看檔案https://webpack.js.org/configuration/mode/ --config指定使用哪個組態檔運行 cross-env 為了兼容windows環境，需要npm i --save-dev cross-env安裝六、測驗
1、運行npm run dev會在默認瀏覽器打開頁面，如下圖：
2、修改js或css會自動重繪頁面
原始碼地址：https://github.com/James-14/webpack4_multi_page_demo
寫的不對之處請大家批評指正~~~~!!!!!!
文章原創，轉載請注明出處，謝謝！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/165958.html
標籤：JavaScript
上一篇：DOMContentLoaded vs jQuery.ready vs onload, How To Decide When Your Code Should Run