webpack-dev-server的配置和使用
2018-02-06 23:54
1056 查看
1安装的WebPack-dev-server
在终端输入
安装webpack-dev-server包
2.配置dev-server
在package.json文件中的脚本中添加代码
在webpack.config.js文件中全局添加
终端输入
安装env
配置环境变量
在webpack.config .JS文件中添加语句
判断isDev的值是否与development相等
将module.exports改为常量的配置并添加语句
可以方便更改配置
在webpack.config.js中添加语句
3.创建HTML页面
终端输入
安装html-webpack-plugin插件
在webpack.config.js中添加语句
配置
完成以上步骤后,终端输入
打包完毕之后,打开浏览器,输入地址本地主机:8000即可进入页面
在终端输入
npm i webpack-dev-server
安装webpack-dev-server包
2.配置dev-server
在package.json文件中的脚本中添加代码
"dev":"WebPack-dev-server --config webpack.config.js”
在webpack.config.js文件中全局添加
target:"web"
终端输入
npm i cross-env
安装env
配置环境变量
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
在webpack.config .JS文件中添加语句
const isDev = process.env.NODE_ENV ==='development'
判断isDev的值是否与development相等
将module.exports改为常量的配置并添加语句
module.exports = config
可以方便更改配置
在webpack.config.js中添加语句
if(isDev){ config.devtool =“#廉价模块-EVAL-源映射”//代码映射 config.devServer = { port:8000,//启动服务监听端口 host:'0.0.0.0',//可以通过localhost访问 overlay:{//在页面上显示错误信息 errors:true, }, open:true,//启动webpack-dev-server时自动打开浏览器 hot:true //启用热更 } config.plugins.push( new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()//热更相关插件 ) }
3.创建HTML页面
终端输入
npm i html-webpack-plugin
安装html-webpack-plugin插件
在webpack.config.js中添加语句
const HTMLPlugin = require('html-webpack-plugin')
配置
plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: isDev ? '"development"' : '"production"' } }), new HTMLPlugin() ]
完成以上步骤后,终端输入
npm run dev
打包完毕之后,打开浏览器,输入地址本地主机:8000即可进入页面
相关文章推荐
- 浅谈webpack-dev-server的配置和使用
- 使用webpack-dev-middleware 和 webpack-hot-middleware 配置一个dev-server
- 使用webpack-dev-middleware 和 webpack-hot-middleware 配置一个dev-server
- 使用webpack3.0配置webpack-dev-server教程
- 使用webpack-dev-middleware 和 webpack-hot-middleware 配置一个dev-server
- webpack配置热加载之react-hot-loader和webpack-dev-server的使用
- 使用webpack-dev-middleware 和 webpack-hot-middleware 配置一个dev-server
- webpack-dev-server远程访问配置
- webpack webpack-dev-server使用指南
- webpack-dev-server使用方法
- vue.js 配置webpack-dev-server 的错误解决方法
- webpack-dev-server 配置
- vue-cli的webpack模版项目配置解析-build/dev-server.js
- webpack开发工具webpack-dev-server使用指南
- 详解webpack-dev-server的使用
- webpack 中开发工具webpack-dev-server和常用loaders加载器的简单使用
- webpack3最新版本配置研究(五) devtool,webpack-dev-server,CommonsChunkPlugin
- vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
- Webpack-dev-server结合后端服务器的热替换配置