webpack常用的插件集合

目录

日常组件使用 

对ES6的解析 插件

image: 如何将打包的时候 将图片一并打包  我们需要使用到这个 file-loader url-loader

更准确的说是资源的复制,不仅仅是image

css预处理器

分离css与js

css自动添加后缀

polyfill 打补丁

HTML的模板文件配置

移动端的打印神器VConsole

Vconsole免安装的cdn版本,进去复制一下你需要的版本

js,css:文件的压缩

暴露全局的变量

更方便的定位出错的信息-devtool

webpack优化

Tree-shaking&scopeHosting(生成环境下)

懒加载

检查打包的构成 

SplitChunks插件

图片压缩

可能会使用到的功能

热更新

webpack.config.js的文件分离

修改html更新页面

resolve的配置

开发,测试,生产环境的变量设置


日常组件使用 

对ES6的解析 插件

npm install babel-loader @babel/core @babel/preset-env

//@babel/core babel的核心模块 
//babel-loader 解析js代码,wepback和babel的桥梁
//@babel/preset-env es6转化成es5插件的集合
//@babel/plugin-transform-runtime   @babel/runtime 去出重复的代码

对了babel的支持我们还需要在根目录下建立一个 .babelrc 的文件写上写上下面的内容 这个地对es6的一系集合

//最简洁的方式
{
    "presets":[
        "@bable/preset-env"
    ]

}
//或者是下面这个是优化webpack
//但是需要安装 @babel/plugin-transform-runtime
//@babel/plugin-proposal-decorators
//@babel/plugin-proposal-class-properties
{
    "presets": [
        ["@babel/preset-env",{
            "useBuiltIns":"usage", //只转化使用的api
            "corejs":3  //@babel/pollyfill   转化es6中高版本的api
        }]
    ], //预设(插件的集合)从下往上
    "plugins":[
         "@babel/plugin-transform-runtime",//将重复的方法与类 提取出来。调取这个提取出来方法。从而达到webpac包裹的减少
        ["@babel/plugin-proposal-decorators", { "legacy": true }],//类装饰器
        ["@babel/plugin-proposal-class-properties", { "loose" : true }]//赋值结构的转换
    ]  //一个个插件  2
}

下面是webpack.config.js的内容 添加上 mode与loader的内容

const path = require('path')
 
module.exports={
    entry:'./src/index.js',
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    },
    mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',
    module:{
         rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
            {
                 test: /\.js$/i,
                exclude: '/(node_modules)/', // 排除文件
                loader: 'babel-loader'
              }
         ]
    }

}

可能遇见的问题:你按照上述的方式安装之后可能会出现,报错的问题,然后npm会给你两个提示分别是两个指令,你输入其中一个就好,如果还是报错,就将node_modules模块删掉掉就好。然后npm inistall    一下。

这个loader 配置直起来有些难 看下这个博主的

Couldn't find preset "@babel/preset-env" relative to directory_云海梦尘的博客-CSDN博客

image: 如何将打包的时候 将图片一并打包  我们需要使用到这个 file-loader url-loader

如果你对于路径打包中图片资源的引用 很苦恼  与css中的引用出现找不到相应的图片,请看这一个博客:关于webpack的file-loader与url-loader打包出现路径不对的问题_huhudeni的博客-CSDN博客

npm i file-loader --D
{
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              // loader: 'file-loader',
              loader: 'url-loader?limit=1024&name=./images/[name].[ext]'
            },
          ],
},

//---------或者是---------
{
          test:/\.(png|gif|jpg)$/,
              use:{
              loader:'file-loader',
                  options:{
                      name:'img/[name].[ext]'
                  }
               }
},

 关于url-loader的使用

npm install url-loader -D

 在webpack中的配置

{
                test:/\.(png|gif|jpg)$/,//定制规则
                use: {
                    loader:'url-loader',
                    options:{
                        limit:10*1024,  //设置小于10Kb的图片转化为base64输出 不在使用image
                        outputPath:'image',//打包后存放的文件夹的位置
                        name:'[name].[ext]'//[name]=名字 [ext]=后缀
                    }
                }
            }

更准确的说是资源的复制,不仅仅是image

const CopyWebpackPlugin = require('copy-webpack-plugin')

在webpack下面写入

module.exports={
    entry:'./src/index.js',
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    },
    plugins:[ 
        new CopyWebpackPlugin([
            {
              from: './src/assets/images',//当前的目录中image的资源位置
              to: './assets/images',//打包后的资源的位置 但是我建议你写的一样 这样就避免了打包中可能会出现图片找不到的问题
              ignore: ['.*']
            }
        ]),
       
  
    ],
 
}

css预处理器


//我使用的sass
//所以是
npm  i  sass sass-loader -D
//下面是我使用的对用的版本 
    "sass": "^1.43.2",
    "sass-loader": "^9.0.2",

//下面是的预处理器。大家需要哪个就需要安装哪个
//style-loader css-loader
//less less-loader
//sass(node-sass 不推荐这个 应为下载有时候下载不成) sass-loader
//stylus  stylus-loader

关于sass的问题需要特别指出,我之前安装出现了版本的问题  与改为下面的

yarn add  sass   sass-loader -D
或者
npm i sass   sass-loader -D

下面是配置单纯的配置css

module:{
    rules:[{
             test:/\.css$/,
             exclude: /node_modules/,//不需要打包成为的
             use:['style-loader','css-loader']//从右往左   或者从下往上
          }]

}

我们需要使用到相关的预处理器 比如使用的是 要使用的是scss

module:{
    rules:[{
            test:/\.scss$/,
            exclude: /node_modules/,
            use中的可以以三种方式配置 1-单纯的字符串(仅仅配置一个loader)2-配置多个loader就是数组形式 3-数组中写入{}从而单独的进行配置具体的loader参数
            use:[{
                loader: 'style-loader',
             },{
                loader:'css-loader',
             },{
                loader: 'sass-loader'
             }],//从右往左   或者从下往上
           }]

}

分离css与js

npm i -D mini-css-extract-plugin

首先我需要在webpack.config.js中添加

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

module.exports={
    entry:'./src/index.js',
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    },
     plugins:[ //分离第一步 要在plugons中使用这个插件
        new MiniCssExtractPlugin(), 
    ],
    rules: [  
            { 
                test: /\.css/,
                include: [
                  path.resolve(__dirname, 'src'),
                ],
                use: [
                  MiniCssExtractPlugin.loader,//使用插件开始进行设置分离
                  // 'style-loader',将style-loader使用MiniCssExtractPlugin.loader替换 他                们不能同时存在
                  'css-loader',
                ], 
               
            },
            {
                test: /\.scss$/,
                use: [
                  MiniCssExtractPlugin.loader,//使用插件开始进行设置分离
                   // 'style-loader',将style-loader使用MiniCssExtractPlugin.loader替换 他们不能同时存在
                  'css-loader',
                  "sass-loader" 
                ]
              } 
        ] 
    },
   plugins:[
            //我们需要先把插件引入
            new MiniCssExtractPlugin({
                filename: 'index.[hash:8].css',
                //这个里面是可以写可以不写的
            }),
        ]
}

注意!!即使使用了 ‘style-loader’ ,在index.html上也不会自动的链接

这个是因为 在 package.json的文件中 模式使用sideEffects:true。这样会把css的文件摇晃下去。所以我们可以将他改为sideEffects:false,就可使自动引用css了,但是这样肯定不行的。因为sideEffects是一个优化项,帮助我们吧多余的文件给剔除掉。所以肯定不能这样处理 跳过去 看这个 Tree-shaking&scopeHosting(生成环境下)

css自动添加后缀

配置方法一

npm i autoprefixer postcss-loader -D

在webpack.config.js中做如下的修改

const path = require('path')
module.exports={
    entry:'./src/index.js',
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    },
 
    module:{
        
            {
                test: /\.scss$/,
                use: [
                  MiniCssExtractPlugin.loader, 
                  'css-loader', 
                  {
                    loader:'postcss-loader',
                    options:{
                      plugins: () => [
                        require('autoprefixer')({
                          overrideBrowserslist:['last 2 version', '>1%'  ]
                        })
                      ]
                    }
                  },
                  "sass-loader", 
 //postcss-loader 执行顺序必须保证在 css-loader 之前,建议还是放在 less或者 sass 等预处//理器之后更好。即 loader 顺序:
//less-loader -> postcss-loader -> css-loader -> style-loader 或者MiniCssExtractPlugin.loader

//其实 postcss-loader 放在 less-loader 之前问题也不大,平时使用的 less 里面的语法基本不会和 autoprefixer 处理产生冲突的。
                ]
              },
             
        ] 
    },
 
}

 配置方法二

 
const path = require('path');
const  {CleanWebpackPlugin} =require('clean-webpack-plugin');
const  HtmlWebpackPlugin =  require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
    //单页面模式
    // entry:'./src/index.js',
    // output:{   
    //     filename:'index.[contentHash:8].js', 
    //     path:path.resolve(__dirname,'dist'),//输出文件名 hash每次打包都会不一样   contentHash内容变化打包  chunkHash引用文件变化打包
    // }, 
    //多页模式
    entry:{//多页模式
        index:'./src/index.js',
        main:'./src/main.js'
    },
    output:{   
         filename:'[name].[hash].js',
        path:path.resolve(__dirname,'dist'),//输出文件名 hash每次打包都会不一样   contentHash内容变化打包  chunkHash引用文件变化打包
    }, 
 
    module:{
        rules:[{
                test: /\.css$/,//确定解析的目标
                // use 有三种模式 分别是 ''  []  {}  字符串是单个  []多个  {} 在laoding中进行其他的配置
                use: [{
                    loader: 'style-loader', 
                },{
                    loader: MiniCssExtractPlugin.loader
                }, {
                    loader: 'css-loader', 
                    options: {
                        importLoaders: 2//标示在使用 css-loader 前先使用后面的两个
                      }
                }, 'postcss-loader','sass-loader']//使用postcss-loader我们需要在根目录下配置两个文件 分别是postcss.config与.browserslistrc
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader'],//从右往左   或者从下往上
            } 
        ]
    },
}

此为我们需要另外在根目录下配置两个文件

文件  postcss.config.js  下面的意思是使用 autoprefixer 插件

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
  }

文件 .browserslistrc    下面的意思是兼容99.5%的浏览器

cover 99.5%

polyfill 打补丁

在我们有时候是需要使用打补丁的

方式1  点击如下的地址,勾上你需要的版本,然后上面会生成一个动态的polyfillPolyfill.ioPolyfill.iohttps://polyfill.io/v3/url-builder/

方式2 需要安装依赖 

npm install --save core-js regenerator-runtime

下面是全量导入(并不是最优解,下面还会有自动按需导入)

手动引入   然后再webpack中的配置修改

// webpack.config.js
const path = require('path');
module.exports = {
  entry: ['core-js/stable', 'regenerator-runtime/runtime', './main.js'],
  output: {
    filename: 'dist.js',
    path: path.resolve(__dirname, '')
  },
  mode: 'development'
};

如果不依赖前端构建工具单独使用的话,使用姿势很简单,只需要安装依赖 npm install --save core-js regenerator-runtime,然后需要在业务代码中需要进行引入:

import "core-js/stable";
import "regenerator-runtime/runtime";

 上述的手动引入,下面是配置引入 ,useBuiltIn字段的设置

        如果 useBuiltIn 设置为 entry,需要手动导入 @babel/polyfill,其使用姿势在上面已经介绍过了,你可以直接导入 core-js 和 regenerator-runtime 也可以在 webpack 的 entry 中设置。useBuiltIn: entry 的作用就是会自动将import "core-js/stable" 和 import "regenerator-runtime/runtime" 转换为目标环境的按需引入。

module.exports = {
  presets: [["@babel/preset-env", {
  	useBuiltIns: "entry",
  ]],
  plugins: []
}

自动按需导入 (自动导入是要配置targets的参数,让babel知道,目标环境是什么) 

下面代码是为了提取重复部分,减少全局作用域污染用的

npm install  @babel/plugin-transform-runtime

如果 useBuiltIns 设置为 usage,则不需要手动导入 polyfillbabel 检测出此配置会自动进行 polyfill 的引入。其配置如下

module.exports = {
  presets: [["@babel/preset-env", {
  	useBuiltIns: "usage",//只有这个参数设置为usage core-js设置才会有用
    core-js:"2"//该配置默认值为 2,但是如果我们需要某些最新的 API 时,需要将其设置为 3
  ],{
  	targets: {
      browsers: [
        'last 3 versions',
        'Android >= 4.4',
        'iOS >= 9.0',
      ],
    },],
  plugins: [
 "@babel/plugin-transform-runtime",//将重复的方法与类 提取出来。调取这个提取出来方法。从而达到webpac包裹的减少
  ]
}

 usage 模式下,Babel 除了会针对目标环境引入 polyfill 的同时也会考虑项目代码代码中使用了哪些 ES6+ 的新特性,两者取一个最小的集合作为 polyfill 的导入。

所以,如果你希望代码尽可能的精简,那么 usage 模式是一个不错的选择,并且这也是官方推荐的使用姿势。

HTML的模板文件配置

上面我们学习了  js  image css 就剩下的html

首先我们需要安装一个plugin  介绍地址: html-webpack-plugin - npm 如果你需要更多的配置看这个

npm i html-webpack-plugin -D

然后我们看下webpack.config中的配置.

const path = require('path'); 
const  HtmlWebpackPlugin =  require('html-webpack-plugin');
module.exports={

    plugins:[
        new HtmlWebpackPlugin({//设置模板文件
              template:'./src/index.html',//使用打包后的模板文件
              filename:'index.html'//打包后文件的名字
        }) ,
    ]  
}

上述的这个如果需要在index中假如一些自动以的内容是根据development与production不同,而添加不同的内容。在这里html-webpack-plugin插件已经帮助我们做好了这部分。在你需要打包是自动需要假如的内容 使用

  <%= htmlWebpackPlugin.options.urlScript %>

要说明的是urlScript 这个是我们自己定义的,你可以叫任何的名字,在传入的时候使用这个变量放入插件的内置中

const path = require('path'); 
const  HtmlWebpackPlugin =  require('html-webpack-plugin');
module.exports={

    plugins:[
        new HtmlWebpackPlugin({//设置模板文件
              template:'./src/index.html',//使用打包后的模板文件
              filename:'index.html'//打包后文件的名字
              urlScript:' '//---<<---就这里
        }) ,
    ]  
}

未经过html转换的文件





  
  
  
  

 

  <%= htmlWebpackPlugin.options.urlScript %>

经过 html-webpack-plugin 的转换之后就会变成





  
  
  
  

 

    -->>之前的标间就被替换成为了 我们之前的插件设置的内容了,这个很有用

移动端的打印神器VConsole

按钮装

npm install vconsole -D

然后在webpack.config.js中配置如下plugin

module.exports={
    entry:'./src/index.js',
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,envTypeDist)
    },
   
    mode:'development',
    plugins:[    
         //放在这里
        new vConsolePlugin({
          filter: [],  // 需要过滤的入口文件
          enable: true // 发布代码前记得改回 false
      }),
    ]
}

在package.json中设置使用放下如下

  "scripts": {
     //--debug 这个就是打开打印的意思
    "build:t": "webpack --mode=development   --progress --color --debug",
 
  },

Vconsole免安装的cdn版本,进去复制一下你需要的版本

vConsole (v3.9.1) - A lightweight, extendable front-end developer tool for mobile web page. | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

然后new一下

  

或者直接使用这个

    
    

js,css:文件的压缩

我们需要使用2个插件

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [ //专门优化而是用的一个采纳数  可以用来压缩css,js 的
      new OptimizeCssAssetsPlugin(),//将插件继续进行使用
      new TerserJSPlugin()
    ]
  },
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出路径
    // filename: 'bundle.[hash].js' //输出文件名 hash contentHash chunkHash
    filename: 'bundle.js' //输出文件名 hash contentHash chunkHash
  },
}

暴露全局的变量

全局变量的暴露 存在3中方法

》直接使用cdn的方式

》providePlugin 给每个模块注入变量

》暴露在全局下 expose-loader

第一,直接使用cdn的方式的方式就不在写了,就是在index中下面通过script的方式引用 我们要使用的是下面的插件

const addAssetHtmlCdnWebapckPlugins = require('add-asset-html-cdn-webpack-plugin')

 形式的话,使用key:vule的形式一直写下去就好了

不太清楚参数,参照:Package - add-asset-html-cdn-webpack-plugin

    plugins:[  
        new addAssetHtmlCdnWebapckPlugins(true,{
            vue: '//cdn.bootcss.com/vue/2.5.16/vue.min.js',
            // jquery: 'https://code.jquery.com/jquery-3.4.1.min.js',
        })

第二,安装了相关了模块之后,我们在webpack.config.js这样写上 这个是将木块暴露给每个的模块,

const webpack = require('webpack');

module.exports = {

    plugins:[ 
        new CleanWebpackPlugin(),//清除打包文件
        new HtmlWebpackPlugin({//设置模板文件
            template:'./src/index.html',//使用打包后的模板文件
            filename:'index.html'//打包后文件的名字
        }) ,
        new MiniCssExtractPlugin({//将css与js分开来
            filename:'css/[name].css',   
        }),
        //加入我需要暴露给全局是jquery   key是暴漏出来给全局的值,后面是相应的模块
        new webpack.ProvidePlugin({
            '$':'jquery',
        })
    ],  
}

第三种使用expose-loader  TAONPM地址:Package - expose-loader的介绍

npm i expose-loader --D

  expose-loader的用法一 :在js脚本中如下引用,然后全局就可以使用jquery了,当然前提是必须安装 jquery到本地,这个方式缺点是不容易统一管理

require("expose-loader?$!jquery");

第二种 :再加上面上的引入之后,否则还是会undefind

//第一步
//你使用的js脚本中使用这个
require("expose-loader?$!jquery"); 




//第二步
//webpack.config.js中的引用 
 module:{
        rules:[
            {
                test: require.resolve("jquery"), 
                loader: "expose-loader?$" 
            }]
  }

更方便的定位出错的信息-devtool

地址webpack的地址信息:Devtool | webpack 中文文档

关于详细的使用信息及其实验:webpack——devtool里的7种SourceMap模式 - 起舞弄清影wy - 博客园

devtool的调试命令,是webpack中的webpack.config.js中使用的。在这里我们推荐两种模式,在开发模式下

module.exports  = {
    mode:'development',
    devtool:'cheap-module-eval-source-map',//这个是我们推荐的模式,在测试环境下
}

在正式的环境下是

module.exports  = {
    mode:'production',
    devtool:'cheap-module-source-map',//这个是我们推荐的模式,在开发环境下
}

webpack优化

Tree-shaking&scopeHosting(生成环境下)

Tree-shaking,这个的参数是在webpack.json中配置的,设置

"sideEffects":false

会将你虽然在js中引用到了,但是并没有使用到的。打包的时候会帮助你去除掉。但是有个问题就是,我们一般是将index.css在index.js中引用。这个时候,设置这个模式也会将css的文件去掉。这样就出现了问题了。

处理办法。我们需要将把打包的文件中,但凡是css的后缀文件。不被Tree-shaking掉。这是方法是

"sideEffects":["**/*.css"]

scopeHosting是减少作用域使用的。在正式环境下。webpack会帮助我们进行优化。减少代码占用的内存,从而提高代码加载的速度。会将没有使用过的代码,去除。

scopeHosting在网上有很多的教程。是webpack4.0上自动优化的,但是尽量使用 import 引入少使用 require( ) ,因为requrie 语法不支持 tree-shking ,会把目标文件整个打包。

看下这个大佬的文章:https://segmentfault.com/a/1190000015689240

懒加载

懒加载分为两种 :Webpack 4教程 - 第八部分 使用prefetch和preload进行动态加载 - 葡萄城技术团队 - 博客园

      第一种预先加载:webpackPrefetch 检查浏览器空闲的时候,下载相关文件。

       第二需要的时候再加载:webpackPreload 比如一个按钮,点击了。在进行加法计算,而这个加法计算放在了另外的一个脚本a.js里面。用户不点击,则不会下载.

案例:

main.js脚本里面的内容

let sum=(a,b)=>{
    return a+b;
}

let minus=(a,b)=>{
return a-b+'minus';
}

// 暴漏出去
export default{
//将这两个参数导出去    
sum,minus
} 

index.js脚本的内容 -点击按钮后才加载相应的相加脚本

let oP = document.createElement('p');
let button = document.createElement('button');

document.body.appendChild(oP);
document.body.appendChild(button);
button.innerHTML = "按钮" 
button.addEventListener('click',function(){
    //懒加载 点击后动态加载文件
    // webpackChunkName  webpackPrefetch 预引入   webpackPreload 预加载
    import(/*webpackPreload:true*/'./main').then((divideModule)=>{
        console.log('divideModule:',divideModule);
        let {sum,minus} = divideModule.default;
        oP.innerHTML = sum(20,10);
    })
})

 !!!   标记一下,工作中发现了一个问题,有的时候,有些wepack上并不能够这样趣使用。是因为没有添加balse的支持插件

npm i babel-plugin-syntax-dynamic-import

 找到相应的  babe设置的地方, 或者是 .babelrc 或者是在webpack.config.js中  添加上下面的这个插件

{
  "plugins": ["syntax-dynamic-import"]
}

懒加载的另外一种方法 使用require


require.ensure(dependencies:String [],
                callback:function(require),
                errorCallback:function(error),
                chunkName:String
) 

//例子
require.ensure([], () => (require(`./index00`)), `index00`); 

第一个参数的依赖关系是一个数组,代表了当前需要进来的模块的一些依赖;
。第二个参数回调就是一个回调函数其中需要注意的是,这个回调函数有一个参数要求,通过这个要求就可以在回调函数内动态引入其他模块值得注意的是,虽然这个要求是回调函数的参数,理论上可以换其他名称,但是实际上是不能换的,否则的的的的WebPack就无法静态分析的时候处理它;
第三个参数errorCallback比较好理解,就是处理错误的回调;
第四个参数chunkName则是指定打包的组块名称。

检查打包的构成 

安装 webpack-bundle-analyzer - npm

npm install --save-dev webpack-bundle-analyzer
const  {CleanWebpackPlugin} =require('clean-webpack-plugin');

plugins:[
    new BundleAnalyzerPlugin()
]

SplitChunks插件

提供两个链接给大家参考:

webpack: SplitChunksPlugin | webpack

大佬文章:理解webpack4.splitChunks - 渴望做梦 - 博客园

图片压缩

我们需要使用到的是image-webpack-loader,里面的具体参数请参考:image-webpack-loader - npm

//被依赖于file-loader如果你安装了就直接安装image-webpack-loader就好了
npm install file-loader --save-dev

//我们需要安装的loader
npm install image-webpack-loader --save-dev
rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',//image-webpack-loader一定要在file-loader先加载
      options: {
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.90],
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75
        }
      }
    },
  ],
}]

可能会使用到的功能

热更新

一半我们写的时候,是不需要使用到热更新的。但是比如我们写一个瀑布流的话,就会出现每次更新加载跟满调试起来也会很慢。这个是我们就要使用热更新的功能了。

第一步我们现在webpack.config.js中,对devServe进行设置

devServe:{
    hot:true,
}

然后我们在代码中这样写

index.js--只的是webpack的入口文件

//被使用的模块脚本--  main.js

export default{


    let add = (a,b)=>{
    
        reture a+b;
    }

}

//使用的脚本中index.js

let op = document.createElment('p');
if(module.hot){
    module.hot.accept('./main',()=>{
        let plus = require('./main').default;
        op.innerHTML = plus(1,4); 
    })
}
//打开页面。当你在修改main 中 let add = (a,b)=>{
    
        reture a+b+1+1+1;
}
//你就会发现,你不刷新页面,页面中会自动进行修改的

或者是直接在index.js添加如下的代码
if(module && module.hot) {
    module.hot.accept()
}

 关于补充:有些文章中会加上一个插件如下--笔者使用上述的方法一九可以实现而更新。加上下面这个这句话,也能是实现

//webpack.config.js
const webpack = require('webpack');
module.exports = {
    //....
    devServer: {
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin() //热更新插件---添加了这个
    ]
}

webpack.config.js的文件分离

在工作中我们可能需要将测试环境与开发环境与生产环境分开

有两个方面需要注意,第一个拆分之后的文件。加入我们这样写

我们需要先安装一个融合的插件 webpack-merge

npm i webpack-merge -D

然后下面是这个三个脚本

//脚本名字 webpack.base.js
const merge = require('webpack-merge');
const dev = require('./webpack.dev');
const prod = require('./webpack.prod');
module.exports = (env) = >{
    let base ={
        //这里面放进去基础的设置
        entry:{},
        output:{},
        resolve:{},
        module:{
            rules:[]
        },
        plugins:[],
    }
     if(env.development){ 
       return merge(base,dev)            //base+dev
    }else{
       return merge(base,prod)          //base+prod
    }


}

//脚本名字 webpack.dev.js
module.expots={
    mode:'development',//设置环境
    devtool:'cheap-module-eval-source-map',//设置报错机制
    module:{
        rules:[]
    },
    plugins:[],
    devServer:{}

}

//脚本的名字叫 webpack.prod.js
module.expots={
    mode:'production',
    devtool:'cheap-module-source-map',//这个是我们推荐的模式,在开发环境下
    optimization: {
        minimizer: [ //压缩的css,js
          new OptimizeCssAssetsPlugin(),
          new TerserJSPlugin()//压缩js
        ]
      }, 
      plugins:[]
}

然后就是package.json文件中,里面中的路径设置一定要设置好

  "scripts": { 
    "build:t": "webpack --mode development --config ./webpack.base",//在这边设置文件的路径
    "build:p": "webpack --mode production -config ./webpack.base",//在这边设置文件的路径
    "dev": "webpack-dev-server --env.development --config ./webpack.base.js"//在这边设置文件的路径
  },

修改html更新页面

 其实在使用这个功能之前我们可以看下相关的描述:模块热替换指的是页面在尽量不经过刷新的情况下将页面所引用的js或css等模块进行热替换。所以你就不难理解,为什么html的更改新并不能导致页面的更新

在webpack.config.js中添加如下的设置

  devServer: {
    port: 9000,
    hot: true,
    contentBase: path.join(__dirname, '/example'),
    watchContentBase: true,//----------这个就是设置要不要html文件更改时,重新刷新页面
  },

resolve的配置

这个功能中主要是我们要做一些一劳永逸的设置

modules: resolve.modules 指定模块需寻找路径  如果第一个路径下没有相应模块就去第二个设置的路径去寻找

//webpack.config.js
module.exports = {
    //....
    resolve: {
        modules: ['./src/components', 'node_modules'] //从左到右依次查找
    }
}

alias :这是路径别名

//webpack.config.js
module.exports = {
    //....
    resolve: {
          alias:{
                '@': path.join(__dirname,'../../src'),//src路径
                '@@':path.join(__dirname,'../../'),//根路径
              } 
    }
}

extensions:自动尝试拼配后缀,当我们import('index')的试试webpack发现你没有后缀。他会去尝试添加你给的后缀,进行查找相应的文件

//webpack.config.js
module.exports = {
    //....
    resolve: {
        extensions: ['web.js', '.js'] //.json, .css 等等什么的
    }
}

开发,测试,生产环境的变量设置

下面的方法,在将webpack.config.js拆分为不同环境下不同的设置文件使用这个

例如:base.condig.js development.config.js  profuction.config.js ,将不同的环境设置为不同脚本,然后在脚本中设置好相应的环境参数,可以在打包的时候进行使用

//webpack.config.js
//这个更适合参数的传入 
module.exports = function (opntion) {
    const modeType = opntion.modeType
    const enrtyPath= opntion.enrtyPath
   plugins: [
       //设置全局变量
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': `'${modeType}'`,
                'process.env.assetPath': `'${enrtyPath}'`,
            }),
    ]
}

你可能感兴趣的:(webpack,webpack,常用,插件,优化)