基於webpack實現多html頁面開發框架五 開發環境配置 babel配置

一、解決什麼問題

     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

寫的不對之處請大家批評指正~~~~!!!!!! 

 

文章原創，轉載請註明出處，謝謝！