基于webpack实现多html页面开发框架五 开发环境配置 babel配置
2019-12-04 16:43
1541 查看
一、解决什么问题
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
写的不对之处请大家批评指正~~~~!!!!!!
文章原创,转载请注明出处,谢谢!
相关文章推荐
- 基于webpack实现多html页面开发框架七 引入第三方库如jquery
- 基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用
- 基于webpack实现多html页面开发框架六 提取公共代码
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
- webpack配置开发环境(html-webpack-plugin、css-loader、less-loader、babel-loader)
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- React多页面应用1(webpack开发环境搭建,包括Babel、热更新等)
- 从零开始使用webpack(4.x)+bable+react+ant-design配置单页面应用开发环境(附模板)
- S2JH新增WIKI页面:开发基础环境配置说明,基于SSH的企业Web应用开发框架
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- webpack学习笔记(二)环境分离+多页面开发配置
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 使用 Webpack 与 Babel 配置 ES6 开发环境
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- (转)基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- webpack---webpack构建vue多页面框架(三、生产环境与开发环境)
- 详解用Webpack与Babel配置ES6开发环境
- 【Python成长之路】基于Flask框架开发web -- 了解html,并实现简单的表格管理平台(3)
- 基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作