webpack的插件使用(三)

2022-06-06  本文已影响0人  未路过

19 插件的使用

07_webpack打包其他资源_13.jpg

20 CleanWebpackPlugin

07_webpack打包其他资源_14.jpg 

const path = require("path");

//loader的话直接写loader的名字，就可以去包里面加载loader，但是插件的话，需要手动进行导入

const { CleanWebpackPlugin} = require("clean-webpack-plugin");
//require("clean-webpack-plugin")导出的是一个对象，我们需要使用这个对象中的一个叫做ClaenWebpackPlugin的类，
//这个是对象的解构

module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
    filename: "bundle.js"
  },
  module: {
    .....
  },
  plugins:[
    //一个个插件对象
    new CleanWebpackPlugin()
  ]
}

21 HtmlWebpackPlugin

07_webpack打包其他资源_15.jpg

1. 自动生成index.html

07_webpack打包其他资源_16.jpg

就算删除了目录底下的Index.html,使用了这个插件之后，是会自动在build里面生成index.html的。

而且还自动引用了bundle.js文件

<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="js/bundle.js"></script></head><body></body></html>


const path = require("path");

//loader的话直接写loader，就可以去包里面加载loader，但是插件的话，需要手动进行导入

const { CleanWebpackPlugin} = require("clean-webpack-plugin");
//require("clean-webpack-plugin")导出的是一个对象，我们需要使用这个对象中的一个叫做ClaenWebpackPlugin的类，
//这个是对象的解构


//不用做结构，因为require("html-webpack-plugin")它导出的就是一个类
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
    filename: "js/bundle.js"
  },
  module: {
    ....
  },
  plugins:[
    //一个个插件对象
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin()
  ]
}

2. 自定义HTML模板

07_webpack打包其他资源_17.jpg

把vue-cli里面的public文件夹里面的index.html文件作为模板，可以设置响应的参数

先把下面这句话注释掉，然后npm run build

  <link rel="icon" href="<%= BASE_URL %>favicon.ico">

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  --》注释  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

然后webpack.config.js里面的pugins设置成如下

  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title:"webpack练习",
      template:"./public/index.html"
    })
  ]

在进行npm run build

设置的html模板就会被进行打包

3. 自定义模板数据填充

如果不注释

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

的话，进行npm run build就会报错，说找不到 BASE_URL ，这时候就要进行如下的操作

07_webpack打包其他资源_18.jpg 07_webpack打包其他资源_19.jpg 07_webpack打包其他资源_20.jpg

如果设置BSASE_URL = "abc", 那么他会在上下文里面找另一个叫做abc的变量，也就是在同一个webpack.config.js的文件里面找，如果在const {DefinePlugin} = require('webpack')下面一行定义const abc = "123", 就会找到abc，然后找到他的值123，把他赋值给BSASE_URL ， 我们这时候就直接给BSASE_URL 一个字符串“./”

const {DefinePlugin} = require('webpack')
  plugins:[
    //一个个插件对象
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
        title:"hahaha"
    }),
    new DefinePlugin({
      BASE_URL : "'./'"
    })
  ]

22. CopyWebpackPlugin

07_webpack打包其他资源_21.jpg 

const path = require("path");

//loader的话直接写loader，就可以去包里面加载loader，但是插件的话，需要手动进行导入

const { CleanWebpackPlugin} = require("clean-webpack-plugin");
//require("clean-webpack-plugin")导出的是一个对象，我们需要使用这个对象中的一个叫做ClaenWebpackPlugin的类，
//这个是对象的解构


//不用做结构，因为require("html-webpack-plugin")它导出的就是一个类
const HtmlWebpackPlugin = require("html-webpack-plugin");

const {DefinePlugin} = require("webpack");

const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
    filename: "js/bundle.js"
  },
  module: {
   ...
  },
  plugins:[
    //一个个插件对象
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      title:"hahaha"
    }),
    new DefinePlugin({
      BASE_URL : "'./'"
    }),
    new CopyWebpackPlugin({
      patterns:[
        {
          from: "public",
    //      to: "./",
          globOptions:{
            ignore:[
              "**/index.html"
            ]
          }
        }

      ]

    })
  ]
}

23 Mode配置

给element.js里面写console.log(wer)，wer没有定义，会报错。然后代开开发工具，发现报错信息是：

bundle.js:1 Uncaught ReferenceError: wer is not defined
    at bundle.js:1:58048
    at bundle.js:1:58115
    at bundle.js:1:58119

打开bundle文件之后，发现什么都看不懂。这时候我们需要设置mode和devtool

07_webpack打包其他资源_22.jpg

在开发阶段，希望打包的bundle.js能看懂，不要压缩，可以设置mode为"development", 只设置mode的话，还是看不懂，里面有很多eval函数包裹着我们实际写的代码，我们还要设置devtool，他的默认值是eval。设置devtool:"source-map",之后，打包好的build文件夹的js文件夹里面有两个js文件，一个是bundle.js和 bundle.js.map文件。 bundle.js.map会把bundle.js里面看不懂的代码，映射到打包前真实的js文件里面，这样哪里出错的时候，就直接能定位到(element.js:25:1)而不是bundle.js(1)

Uncaught ReferenceError: wer is not defined
    at ./src/js/element.js (element.js:25:1)
    at __webpack_require__ (bootstrap:19:1)
    at nonce:1:1
    at bundle.js:1142:3
    at bundle.js:1144:12

module.exports = {
      //设置模式
  //development 开发阶段，会设置development
  //production 准备打包上线的时候，设置production
  mode:"development",
    //设置source-map，建立js映射文件，方便调试代码和错误
  devtool:"source-map",
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
    filename: "js/bundle.js"
  },
07_webpack打包其他资源_23.jpg

如上图，设置development模式，就代表下面的红字的设置自动添加了，不用配了，就自动配好了

总结：我们准备上线的时候会这只mode为production。开发的时候设置为development模式。

设置source-map的目的是建立js映射文件，方便调试代码和错误。

上一篇下一篇

猜你喜欢

热点阅读