使用webpack-dev-server实现热更新

这是我写的一个Demo，webpack-HMR-demo

1、Webpack 是什么？

直接上图

img

简言之：webpack可以做如下的事情

  • 打包所有的脚本
  • 打包所有的图片
  • 打包所有的样式

一句话：打包所有的资源

2、webpack 之安装

2.1 webpack安装环境依赖

webpack是基于Node的， 在安装Webpack之前需要安装Node环境, 这里就不赘述了。安装成功后打开CMD控制台，输入如下命令验证是否安装成功

img

在这里安利一个node版本管理插件 nvm, 可以实现本地多个node 版本自由转换

创建你的项目目录, 在当前目录下执行 npm init, 初始化项目目录环境，生成 package.json

img

package.json里存放着当前项目的相关信息，包含 版本号，开发者，开发环境依赖，生产环境依赖，在这里我们重点关注 scripts， webpack构建命令在这里配置。

img

2.2 安装webpack

执行 npm install webpack webpack-cli -D ， 其中 -D 也就是 --save-dev, 如果是要作为生产环境的依赖则是 --save 即可

安装成功后， 在 package.json 文件 会保存对应的安装信息

img

2.3 如何使用webpack构建呢？

笔者当前使用的是 webpack4.0+, 在 webpack 4 中，可以无须任何配置使用也就是 0配置，然而大多数项目会需要很复杂的设置，所以 webpack 仍然支持使用配置文件的方式。

首先在项目目录下创建 src 目录，然后创建 index.js， webpack4 构建的默认入口文件 src/index.js

img

2.3.1 构建方式一： 0配置构建

此时，就可以发挥webpack的构建效果啦。 执行 npx webpack， 构建成功后会在项目目录下自动生成一个dist目录，同时生成构建后的js文件： main.js, 默认名字，不用担心，这个是可以修改的哟。

科普时间：
1. npm 5.2.0 版本中内置了伴生命令：npx，类似于 npm 简化了项目开发中的依赖安装与管理
2. npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，
就会帮你安装, 这里的PATH 就是项目 node_modules
3.如果npm版本较低，可以全局安装 npm install -g npx
复制代码

img

至此你已经学会如何使用 webpack 这门武林秘籍啦。那我们在浏览器中看看效果吧。我们在dist目录手动创建一个index.html, 同时引入 main.js

img

img

通过查看构建后的main.js文件，可以看到是压缩后的代码，这是因为 webpack 提供了不同的打包 mode

npx webpack --mode production  //构建用于发布的代码, 代码会压缩
npx webpacck --mode development //开发过程中构建代码, 代码不压缩
复制代码

2.3.2 构建方式二 使用 webpack.config.js

在项目根目录下创建 webpack.config.js, 前面提到过 webpack 是基于 node环境的， 所以同样采用的是 Commonjs 包管理规范。

module.exports = {
    entry: '', //打包入口文件,
    output: {}, //打包出口文件,
    plugins: [], //配置插件
    module: {
        rules: []  //配置各种用于源文件编译加载的loader
    },
    devServer: {} //配置开发静态http服务
}
复制代码

如下配置，执行 npx webpack --mode development, 同样也可以构建成功

let path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}
复制代码

构建后会生成如图文件

img

如果想保持和源文件相同的名字则可以这样配置 '[name].js', 如果要加上hash值，则 '[name].[hash].js'

let path = require('path');
module.exports = {
    entry: {
        index: './src/index.js
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    }
}

img

2.3.3 html 文件之构建

上面在验证构建后js是采用的手动方式去创建 html， 并手动引入，如果webpack这么弱，那也太弱了吧。哈哈哈...

那该怎么解决这个问题呢？下面我们就要用到插件: html-webpack-plugin, 首先得安装这个插件 npm i html-webpack-plugin， 可以去npm官网看看其用法。

img

引入并调用该插件。执行npx webpack命令。则会帮你在dist目录，自动创建相应的html和js， 并自动引用相应的静态资源文件.

img

再说说

   new HtmlWebpackPlugin({
        filename: 'a.html', //构建后生成的文件的名字
        chunks: ['index'],  //构建时所用到的js源文件， 与 entry 中的 key 一一对应
        template: './src/index.html',  //所用到的html源文件，主要是考虑到一个项目中可能有多个html文件
        hash: true, //自动给构建后的html文件中的js, css等引入路径加上hash值，类似get请求中加上时间戳
    }),

2.3.4 css 文件之构建

* 安装插件 npm i extract-text-webpack-plugin@next -D
* 安装相应的css loader : npm i style-loader css-loader -D
* 在index.js中文件引入 index.css 文件
* 在webpack.config.js中引入插件

style 标签载入 css文件

 plugins: [
        cssExtract,
        new HtmlWebpackPlugin()
    ],
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }

以link方式载入css文件，也就是抽离css文件

  {
    test: /\.css$/,
    use: cssExtract.extract({
        fallback: 'style-loader',
        use: [{
            loader: 'css-loader',
        }]
    })
  }

css 文件的处理就到这里，其他css文件，比如 less-loader, sass-loader, 后面作一个专题再展开讨论

优化css加载插件 npm i purifycss-webpack purify-css -D

2.3.5 图片处理

html文件中引入img 标签， 这里需要用到 html-withimg-loader

npm i html-withimg-loader -D
复制代码
 {
                test: /\.(png|gif|jpg)$/,
                use: [{
                    loader: 'url-loader'
                }]
            },
            {
                test: /\.html/,
                // 处理html中的图片loader
                use: 'html-withimg-loader'
            }

构建后dist目录下的 html 中的 img标签

  <img src="data:image/png;base64,...'/>

当然大多数情况下，会选择将引用的图片构建在 dist/images 目录中，此时只需将上述配置稍加修改即可

 {
                test: /\.(png|gif|jpg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 5,   //
                        outputPath: 'images/'   //构建后的目标目录
                    }
                }]
            },
            {
                test: /\.html/,
                // 处理html中的图片loader
                use: 'html-withimg-loader'
            }

区分下 url-loader 和 file-loader的差别

The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.

示例说明： 在src/index.css中有如下代码

div{ background: url(1.png) }

如果将 limit 设置为 0 时， 构建后 dist/index.css 代码为:

div{ background: url(data:image/png;base64,....) }

当limit不为0时， url-loader 和 file-loader 作用一样

--------------------------------华丽的分割线--------------------------------------

看到这里，webpack的最常用的几种用法都已介绍完成。在实际开发过程中，为了提高效率。最好在真正开发前配置好这些。

2.3.6 本地静态服务，自动刷新。

先安装npm i webpack-dev-server -D，同时在webpack.config.js中配置：

 devServer: {
        contentBase: './dist',
        host: 'localhost',
        port: 4000,
        open: true,
        hot: true // 还需要配置一个插件 HotModuleReplacementPlugin
    }

执行 npx webpack-dev-server, 即可看到浏览器自动打开，并加装构建后的html文件。

  • 那如何才能真正地自动构建，自动刷新，解放双手呢？ webpack 内置插件 HotModuleReplacementPlugin new webpack.HotModuleReplacementPlugin()
  • 删除构建的历史文件，可以使用 插件 clean-webpack-plugin

转自https://juejin.im/post/5ae919eb5...
类似文章webpack 插件拾趣 (1) —— webpack-dev-server

posted @ 2018-12-28 17:32  xlupc  阅读(806)  评论(0)  编辑  收藏  举报