Webpack 4.X 从入门到通晓 - devServer与mode（三）

2019年8月22日 179次阅读来源: kaivon

上一篇文章里细致引见了一下插件的用法，这一篇文章接着雄厚module.exports里的属性。如今的前端生长已异常敏捷了，陪伴而来的是开辟形式的改变。如今已不再是写个静态页面并放在浏览器里翻开预览一下了。在现实的开辟中会常常须要运用http效劳器，比方之前的ajax，想要看到结果就必须搭建一个效劳器。搭建效劳器的体式格局有异常的多，而webpack则原生的供应效劳器的支撑，人人无需再去下载软件。同时它还供应了自动革新、热更新等功用，使开辟变得异常轻易。

devServer

装置运用

npm i webpack-dev-server -D

翻开终端，并进入到对应的项目里（我的为webpack-demo），实行敕令webpack-dev-server，假如终端里显现以下则示意已胜利开启效劳器
《Webpack 4.X 从入门到通晓 - devServer与mode（三）》

注重：
1、此时可能会提醒
webpack-dev-server不是内部敕令，处理办法为在全局再次装置一下
webpack-dev-server模块，或许在
package.json里的
scripts里加上
"dev": "webpack-dev-server"，然后实行敕令
npm run dev
2、此时我并没有经由过程
webpack敕令天生一个
dist目次（目次构造以下图），然后在浏览器里输入地点
http://localhost:8080/后，页面会一般显现。这个原因是
devServer会将
webpack构建出的文件保存到内存里，不须要打包天生就能够预览

《Webpack 4.X 从入门到通晓 - devServer与mode（三）》

设置参数

webpack.config.js的内容以下：

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

module.exports={
    entry:{
        index:'./src/index.js',
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js'
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'陈学辉',
            template:'./src/template.html',
            filename:'index.html',
        })
    ],
    devServer:{
        host:'localhost',    //效劳器的ip地点
        port:1573,    //端口
        open:true,    //自动翻开页面
    }
}

index.js文件内容以下：

console.log('这是进口文件');

template.html文件内容以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <div id="box">这是自带的div</div>
    </body>
</html>

实行敕令webpack-dev-server后，浏览器会自动翻开页面，同时假如修正index.js文件后浏览器会自动革新，以下图：
《Webpack 4.X 从入门到通晓 - devServer与mode（三）》

热更新

默许情况下开启了效劳器后，只需进口文件有更新那全部页面就会从新革新。假如页面里引入的模块异常多的情况下让全部页面革新就会变得有些慢，这个题目能够交给热更新去处理。热更新的意义就是只更新有修改的模块（像ajax一样部分革新）

运用步骤

1、引入webpack模块

const webpack=require('webpack');

2、写入插件

plugins:[
    new HtmlWebpackPlugin({
        title:'陈学辉',
        template:'./src/template.html',
        filename:'index.html',
    }),
    new webpack.HotModuleReplacementPlugin()    //引入热更新插件
]

3、devServer里增添hot参数

devServer:{
    host:'localhost',    //效劳器的ip地点
    port:1573,    //端口
    open:true,    //自动翻开页面，
    hot:true,    //开启热更新
}

此时并不能看出结果，到背面的文章里讲loader的时刻就能够够看出来结果
devServer的别的设置：https://webpack.docschina.org…

mode

mode是webpack4新增的一条属性，它的意义为当前开辟的环境。mode的到来减少了许多的设置，它内置了许多的功用。相较之前的版本提升了许多，减少了许多特地的设置

提升了构建速率
默许为开辟环境，不须要特地设置
供应紧缩功用，不须要借助插件
供应SouceMap，不须要特地设置

mode分为两种环境，一种是开辟环境（development）,一种是临盆环境（production）。开辟环境就是我们写代码的环境，临盆环境就是代码放到线上的环境。这两种环境的最直观区分就是，开辟环境的代码不供应紧缩，临盆环境的代码供应紧缩。

运用体式格局1：在敕令背面增加

webpack –mode development
webpack –mode production

运用体式格局2：在`package.json`里增加

"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },

此时后成dist目次用的是临盆环境，翻开效劳器用的是开辟环境，然后经由过程敕令实行npm run build或许npm run dev，它们的区分以下
dist目次里的index.bundle.js内容以下：
《Webpack 4.X 从入门到通晓 - devServer与mode（三）》
http://localhost:1573/index.bundle.js内容以下：