社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
devtool: 'inline-source-map',
接下来简单介绍下三者的使用
webpack's Watch Mode
使用:
在文件package.json里的script字段配置如下
"watch": "webpack --watch"
此时我们npm run watch会发现命令不会结束,
当我们的文件有修改并保存时,它会帮我们自动编译,但是有个缺点是,如果我们想要看到我们的修改,我们需要手动刷新浏览器。此时我们可以用webpack-dev-server
webpack-dev-server 给我们提供一个web服务器
首先安装
npm install --save-dev webpack-dev-server
然后再配置文件里配置如下:
devServer: {
contentBase: './web'
},
表示在localhost:8080下建立服务,web文件夹下的文件被访问
在配置文件的script里添加
"start": "webpack-dev-server --open"
运行npm run start会在浏览器打开localhost:8080
webpack-dev-middleware
npm install --save-dev express webpack-dev-middleware
配置
publicPath
也会在服务器脚本用到,以确保文件资源能够在 http://localhost:3000
下正确访问,我们稍后再设置端口号。下一步就是设置我们自定义的 express
服务
新建server.js,与配置文件webpack.config.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
// Serve the files on port 3000.
app.listen(3000, function () {
console.log('Example app listening on port 3000!n');
});
在package.json的script里配置
"server": "node server.js"
运行npm run server即可在浏览器打开localhost:3000
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!