学习vue第二天--webpack的插件

插件

通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的 webpack 插件有如下两个：

webpack-dev-server

• 监听文件变化，自动进行打包和构建
• npm install webpack-dev-server -D

配置：

1. 修改 package.json -> scripts 中的 dev 命令如下：

   "scripts": {
       "dev": "webpack serve"
     },
   

2. 再次运行 npm run dev 命令，重新进行项目的打包

3. 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

4. 打包生成的文件哪儿去了？

   1. 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
      • 严格遵守开发者在 webpack.config.js 中指定配置
      • 根据 output 节点指定路径进行存放
   2. 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
      1. 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
      2. 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

   访问：

       <!--原地址 -->
       <script src="./index.js"></script>
       <!--生成文件路径-->
       <script src="../dist1/myindex.js"</script>
       <!-- 加载和引用内存里的/myindex.js -->
       <script src="/myindex.js"></script>
   

html-webpack-plugin

• 模板引擎，可以通过此插件自定制 index.html 页面的内容
• npm install html-webpack-plugin -D

配置

webpack.config.js 中

// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require("html-webpack-plugin");
// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  // 指定要复制哪个页面
  template: "./src/index.html",
  // 指定复制出来的文件名和存放路径
  filename: "./index.html",
});
module.exports = {
  // 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
  plugins: [htmlPlugin],
};

注意：凡是修改了webpack.config.js 配置文件，或修改了package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！

可直接在 http://localhost:8080 看页面

devServer 节点

在webpack.config.js 配置文件中，可以通过devServer节点对webpack-dev-server 插件进行更多的配置，示例代码如下：

 devServer:{
        open:true,//初次打包完是否自动打开浏览器，布尔值
        host:'192.168.5.194',//实时打包所使用的主机地址
        port:80,//实时打包所使用的端口号
    }

属性	描述	值
open	初次打包完是否自动打开浏览器 ，布尔值	true
host	实时打包所使用的主机地址	电脑ip， 形如：'192.168.5.194' 或者本地地址'127.0.0.1'/'localhost'
port	实时打包所使用的端口号, 如果端口号已使用，自动递增直到未使用端口号	80