webpack学习笔记4:开发

 

•  source-map:用于追踪错误和警告具体在我们代码的哪个文件的哪行代码，使用方式是在配置文件里添加以下配置项

 devtool: 'inline-source-map',

•  选择一个开发工具：可以在我们的代码发生变化时自动编译，不用我们每次都手动npm run dev，其中常用的是webpack-dev-server。

1. webpack's Watch Mode
2. webpack-dev-server
3. webpack-dev-middleware

接下来简单介绍下三者的使用

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