基于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，代码如下：

  {
                 test: /\.m?js$/,
                 exclude: /(node_modules|bower_components)/,//不包含node_modules、bower_components

                 use: {
                   loader: 'babel-loader',
                 }
   },

　　2、在根目录下新增babel配置文件.babelrc，代码如下：

 {
     "presets": ["@babel/env"]
 }

四、开发环配置

　　1、根目录下新建webpack.dev.conf.js文件，代码如下，代码中有注释，可根据下面的代码自己调试：

 const path = require("path");
 const merge = require("webpack-merge");
 const webpackConfigBase = require("./webpack.config.js");

 const webpackConfigDev = {
     devServer: {
         contentBase: path.join(__dirname, 'dist'),
         // publicPath: '/',
         // host: 'local.pcteam.com.cn',
         // host: '0.0.0.0' || 'config.dev.host', //手机联测使用
         port: '8000',
         overlay: true, // 浏览器页面上显示错误
         open: true, // 开启浏览器
         // stats: "errors-only", //stats: "errors-only"表示只打印错误：
         // hot: true, // 开启热更新
         // inline: true,
         //服务器代理配置项
         disableHostCheck: true,
         proxy: {
             '/api': {
                 target: 'http://test.pcteam.com.cn',
                 changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
                 secure: false,
                 // pathRewrite: {
                 //     '^/files': ''
                 // }
                 //修改服务端返回的cookie路径
                 // cookiePathRewrite: {
                 //     '///': '///',
                 // },
                 //修改服务端返回的cookie domain
                 // cookieDomainRewrite: {
                 //     'unchanged.domain': 'unchanged.domain',
                 //     'pcteam.com': 'local.pcteam.com:8000',
                 //     '*': '',
                 // },
             },
         },
     },
     plugins: [
         //热更新 hot: true 需要同时配置
         // new webpack.HotModuleReplacementPlugin(),
     ],
     // 生成map格式的文件，里面包含映射关系的代码，如果想查看在源文件中错误的位置，则需要使用映射关系，找到对应的位置。
     devtool: 'source-map',
 }

 //合并基础配置和dev配置
 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

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

文章原创，转载请注明出处，谢谢！