webpack开发

在webpack的构建过程中我们需要用到一些基本构建开发工具来提升我们的工作效益

webpack常用开发工具模块

• source map 自动追踪代码错误所在的文件
• webpack watch 观察者模式自动编译
• webpack-dev-server 指定目录启动本地服务
• webpack-dev-middleware 传递文件给服务器

webpack中sourcemap的配置

sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术。尤其是如今前端开发中大部分的代码都经过编译，打包等工程化转换。比如开发环境下
用scss写样式，想在浏览器中在线半级css那样编辑scss就不是那么容易了。
eg:如果将三个源文件(a.js,b.js和c.js)打包到一个bundle(bundle.js)中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到bundle.js。这并没有什么帮助，
因为你可能需要准确地知道错误来自哪个源文件

a.js内容如下

function a(){
	console.log("page a");
	
}
export default{
	b,
	a:a
}

b.js内容如下

function b(){
	console.log("page b");
	
}
export default{
	b:b
}

c.js内容如下

function c(){
	console.error("page c");
	
}
export default{
	c:c
}

webpack.config.js内容如下

没有配置sourcemap

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	entry:{
		a:"./src/a.js",
		b:"./src/b.js",
		c:"./src/c.js"
	},
	output:{
		filename:"[name].js",
		path:path.resolve(__dirname,"dist")
	},
//	devtool: 'inline-source-map',
	plugins:[
		new htmlWebpackPlugin()
	]
}

结果如下

结论：在没有配置上sourcemap的时候，debug模式下错误是在打包后的文件
webpack.config.js里配置上sourcemap

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	entry:{
		a:"./src/a.js",
		b:"./src/b.js",
		c:"./src/c.js"
	},
	output:{
		filename:"[name].js",
		path:path.resolve(__dirname,"dist")
	},
	devtool: 'inline-source-map',
	plugins:[
		new htmlWebpackPlugin()
	]
}

结果如下：

结论：在没有配置上sourcemap的时候，debug模式下错误是在源文件

webpack watch观察者模式

在packge.json文件中添加一个用于启动webpack观察者模式的npm script脚本

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

之后使用npm run watch就可以观察文件了

使用webpack-dev-serve

webpack-dev-server

使用webpack-dev-middleware

webpack-dev-middleware