基于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

写的不对之处请大家批评指正~~~~!!!!!! 

 

文章原创,转载请注明出处,谢谢!