webpack-dev-server使用方法

webpack-dev-server使用方法

首先来回顾如下webpack的内容

首先，咱们来看看基本的webpack.config.js的写法

const path=require('path')
//这个配置文件，其实就是一个JS文件，经过Node中的模块操做，向外暴露了一个配置对象
module.exports={
	//在配置文件中须要手动指定入口和出口
	entry:path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包哪一个文件
	output:{
		path:path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪一个目录中去
		filename:'bundle.js' //这是指定 输出的文件的名称
	}
}

配置文件提供一个入口和一个出口，webpack根据这个来进行js的打包和编译工做。虽然webpack提供了webpack –watch的命令来动态监听文件的改变并实时打包，输出新bundle.js文件，这样文件多了以后打包速度会很慢，此外这样的打包的方式不能作到hot replace，即每次webpack编译以后，你还须要手动刷新浏览器。

webpack-dev-server其中部分功能就能克服上面的2个问题。

原始文件做出改动后，webpack-dev-server会实时的编译，可是最后的编译的文件并无输出到目标文件夹，即上面配置的:

output:{
		path:path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪一个目录中去
		filename:'bundle.js' //这是指定 输出的文件的名称
	}

注意：你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。所以不少同窗使用webpack-dev-server进行开发的时候都看不到编译后的文件

1、安装webpack_dev_server

webpack_dev_server的做用其实就是**“热部署”**

注意：必定要在本项目中安装webpack才行（不加-g，在项目根目录出现node_modules文件夹，内含webpack及其依赖包）

npm install webpack

在本地项目中安装完webpack后，再在终端中进入项目目录下，敲下

npm install webpack-dev-server --save-dev

回车来安装webpack_dev_server,

以后再启动webpack_dev_server

.\node_modules\.bin\webpack-dev-server

或者是npm run dev命令也行，为了不出现webpack和webpack-dev-server之间的版本兼容性问题，这里举例按下图配置版本是没有问题的

命令行执行成功了

到此webpack_dev_server热部署已经启动了，部署的服务器地址在localhost:8080/上，项目也就部署到该地址上了

以本例来讲：main.js作如下修改，而后ctrl+s保存，会看到cmd控制台会再次编译成功，截图见下面第2张图

而后咱们再次访问src下的index.html发现颜色仍是red，没有变成blue。继续看下面是如何解决此问题！

咱们再去看index.html文件，发现引入的js文件是本项目的dist/bundle.js是磁盘上确确实实存在的文件，而咱们webpack_dev_server的帮咱们从新打包生成的bundle.js文件并无存放到实际的物理磁盘上（由于是从新编译打包，因此是覆盖原文件bundle.js）；而是直接存放在电脑的内存中，因此咱们这里的问题很简单解决，直接把src="…/dist/bundle.js"改为src="/bundle.js"便可，src="/bundle.js"中的bundle.js不是从本项目导入的，而是从电脑内存导入的(解释：由于是webpack_dev_server部署服务器(使用内存空间)地址在localhost:8080,因此能够直接使用"/"来访问，因此“/bundle.js”是从内存导入的)，

修改为src="/bundle.js"以后，就没有问题了，每次咱们修改main.js里的代码，只须要ctrl+s保存，而后webpack_dev_server自动编译（热部署），浏览器端就会即时展现新的应用效果

2、webpack_dev_server的经常使用命令参数

咱们能够自定义设置webpack_dev_server启动的一些参数，而不采用它默认的

第一种配置方式：

下面的–hot参数是“热加载”的意思，就是说咱们每次修改要编译的源文件（对修改css文件能够，可是对js文件好像不行）而后ctrl+s保存后，浏览器不从新刷新，而是直接异步加载

第二种配置方式：

把原来在package.json中dev:后面的参数部分给删掉，只留下“webpack-dev-server”部分

再修改webpack.config.js，添加deServer:属性和plugins属性，按下图配置，同时要在webpack.config.js开头添加const webpack=require(‘webpack’)便可

3、html-webpack-plugin的两个基本做用

由于咱们的index.html是存放在磁盘上的，咱们若是想把index.html页面也存放到内存中（也用webpack-dev-server部署）去该怎么办呢？这个时候就须要用到html-webpack-plugin插件了

在plugins属性中写new htmlWebpackPlugin()对象，而后指定原文件，和要在内存中生成的目标页面的名字便可，这样OK了

4、loader—配置处理css样式表的第三方loader

若是咱们直接在main.js里面引入css文件而后用webpack-dev-server打包部署的话，会报错，因此咱们须要解决这个问题、 注意：webpack默认只能打包处理 JS类型的文件，没法处理其余的非JS类型的文件

解决问题，

第一步： 先在项目的cmd控制台下执行

npm i style-loader css-loader -D

来安装css加载器

具体思路见下图：

第二步: 在webpack.config.js里面新增一个module节点，而后进行下图配置

到此为止通过配置之后，webpack-dev-server就能够对css文件打包部署了

总结： webpack处理第三方文件类型的过程

1.发现这个要处理的文件不是JS文件，而后就去配置文件中，查找有没有对应的第三方loader规则

2.若是可以找到对应的规则，就会调用对应的loader处理这种文件类型

3.在调用loader的时候，是从后往前调用的，好比本例中就是先调用css-loader，再调用style-loader

4.当最后的一个loader调用完毕，会把处理的结果直接交给webpack进行打包合并，最终输出到bundle.js中去

5、loader—配置处理less样式表的第三方loader

好比再main.js中引入less文件以下，webpack确定不能直接对此编译和打包部署，因此须要咱们在本地项目中安装less-loader，

在项目的cmd控制台中输入npm i less-loader -D安装less-loader

而后再在项目的cmd控制台中输入npm i less -D安装less

而后再在webpack.config.js中的module里配置以.less为结尾的文件的规则，loader的执行规则是从右到左，因此下面配置写的是最右边是less-loader,而后处理完交给css-loader，再而后把处理结果交给style-loader，最后把最终结果交给webpack打包部署。 能够看到loader配置是从右到左的

6、loader—配置处理sass样式表的第三方loader

跟上面同样的套路作法，若是再main.js中引入.scss文件

解决方法：

①在项目的cmd控制台中输入npm i sass-loader -D安装sass-loader

②而后再输入npm i node-sass -D安装node-sass

③而后在webpack.config.js中的module里配置以.scss为结尾的文件的规则便可