WebpackDevServer 的使用 - 提升开发效率

前面，每次我们想要打包的话，都得先删除先前打包得文件，然后运行命令 npm run bundle . 然后打开浏览器，输入文件地址才能查看页面。

下面我们可以通过三种方式，实现，每当改动src 中代码后，webpack 能自动帮助我们打包成压缩文件。

第一种方式：使用命令webpack --watch

我们将package.json 文件加上这个命令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "webpack",
    "watch": "webpack --watch"
  },

然后，直接运行命令 npm run watch

当src 文件夹下，有文件改动时，它就会自动帮我们打包，然后去浏览器刷新就可以了。

第二种方式：使用webpack 的 WebpackDevServer 配置项

这个需要我们去下载 webpackDevServer

使用命令 npm install webpack-dev-server --save-dev

然后在webpack.config.js 文件中配置，devServer,它的一个配置项contentBase(服务器要启在哪个文件下，应该是打包生成的文件所在的目录)。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
	mode: "development",
	devtool: "cheap-module-source-map",
	devServer: {
		contentBase: './dist'
	},
	entry: {
		main: "./src/index.js"
	},
	module: {
		rules: [{
			test: /\.(png|jpg|gif)$/,
			use: {
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: 'imgs/'
				}
			}
		},{
			test: /\.scss$/,
			use: ['style-loader',
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2,
						modules:true
					}
				},
				'sass-loader',
				'postcss-loader']
		}]
	},
	output: {
		// publicPath: "http://cdn.com.cn",
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [new HtmlWebpackPlugin({
		template: 'src/index.html'
	}), new CleanWebpackPlugin()]
}

配置好webpack/config.js 中的devServer 之后，我们再去修改package.json 文件。我们添加一个命令，如下。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server"
  },

好啦。现在运行命令 npm run start 就会给我们起一个服务器了。下面是返回的信息，我们可以在浏览器输入服务器地址 http://localhost:8081 就可以访问页面了。而且每次更改src 代码，浏览器自动刷新。

WebpackDevServer 的使用 - 提升开发效率

再给devServer 配置 open 为 true，以后每次npm run start 后，它能帮我们在浏览器中打开页面。如下。

	devServer: {
		contentBase: './dist',
		open: true
	},

使用 webpack-dev-server 还有一个好处，就是它可以允许我们发送ajax 请求。因为如果要发送ajax 请求，则要求发送请求的页面是在一个服务器上，通过http 协议的方式打开。如果我们使用文件的方式打开页面的话，浏览器中网页地址前缀就是file:，而webpack-dev-server 方式的话，网页地址前缀就是http: 就是http协议。

当我们写react 或者 vue 的时候，都有proxy 的配置。它是帮助我们在做跨域的接口模拟时，接口代理。我们可以在webpack documentation > configuration > devServer 中找到 devServer.proxy 的介绍。如下面的配置，就是当访问本地/api 时，它能自动跳转到 http://localhost:3000 。

WebpackDevServer 的使用 - 提升开发效率

第三种方式，node.js + webpack

我们先在package.json 中创建一个指令叫 middleware，如下。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server",
    "middleware": "node server.js"
  },

然后我们在package.json 同级目录下创建文件 server.js。下面我们在server.js 中实现，当src 有变化时，重新打包的功能。

我们使用express 快速搭建一个http 服务器。同时，它还需要一个webpack 的开发中间件 webpack-dev-middleware

我们用命令安装 npm install express webpack-dev-middleware --save-dev

安装好后，我们修改一下 webpack.config.js 中的配置。配置一下output 下的“publicPath”，设置一下，所有打包文件之间的引用，路径前面都加一个“/”。这样确保一下，打包生成的文件不会有什么问题。

	output: {
		// publicPath: "http://cdn.com.cn",
		publicPath: "/",
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},

下面，我们来写server.js 文件。

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const complier = webpack(config);

const app = express();
app.use(webpackDevMiddleware(complier,{
	publicPath: config.output.publicPath
}));

app.listen(3000,() => {
	console.log('server is running');
})

好啦，然后使用命令 npm run middleware 命令即可。

WebpackDevServer 的使用 - 提升开发效率

相关推荐