Webpack打包工具

不念不忘少年蓝@ 2023-06-04 12:59 11阅读 0赞

### 文章目录 ###

*  1，webpack需要npm安装
 *  2，使用webpack打包工具，就不用在html页面引用js文件了，如何引用？
 *  3，webpack打包命令
 *   *  3.1，全局webpack
     *  3.2，局部安装webpack（本地）
     *  3.3，webpack打包css文件
     *  3.4，安装loader
     *  3.5，webpack打包less文件
     *  3.6，webpack打包图片文件
     *  3.7webpack-ES6转ES5的babel
 *  4，webpack-使用Vue的配置过程
 *  5，创建Vue时template和el的关系
 *  6，Vue的终极使用方案
 *  7，webpack横幅plugin的使用
 *  8，webpack-HtmlWebpackPlugin的使用

https://www.bilibili.com/video/av68424291/?p=84

# 1，webpack需要npm安装 #

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack.github.io/docs，官网对webpack的定义是MODULE BUNDLER，他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。 请看下图：  
![img][]

**webpack 的优势**

其优势主要可以归类为如下几个：

webpack是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。  
支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码;less-loader加载器，可以将less编译成css文件；  
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。  
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。

npm是nodeJS的一个打包工具，它是依赖node环境的，所以在安装npm之前需要先安装node，npm是和node一起安装的。

安装好node之后再安装全局的webpack

*  在终端执行命令：

npm install webpack -g

*  如果指定webpack版本安装：

npm install webpack@3.6.0 -g

创建一个空文件夹作为vs code的工作环境，新建dist文件夹（打包js）和src文件夹（html页面和js文件等）

# 2，使用webpack打包工具，就不用在html页面引用js文件了，如何引用？ #

先创建一个mathUtil.js文件，导出add和mul方法

function add(a,b){ 
        return a+b;
    }
    function mul(a,b){ 
        return a*b;
    }
    
    // 导出方法，在main.js入口函数中进行引用
    module.exports={ 
        add,mul
    }

创建一个main.js文件，这是js入口文件，所有的js文件都可以引用到main.js文件中，最后把main.js文件使用webpack打包即可,然后再html页面把打包后的js文件引用进去。

//main.js是我们项目的JS入口文件
    
    // 导入mathUtil.js的那两个方法
    //1，使用commonJS的模块化规范导入
    const{ add,mul}=require("./js/mathUtil.js");
    console.log(10,20);
    console.log(10,20);

终端打包命令：（把main.js入口文件打包成bundle.js）

webpack ./src/main.js ./dist/bundle.js

然后可以在浏览器打开html文件，js正常能引用到。

还有一种方法?

创建一个info.js文件

export const name="圆梦杨aa";
    export const age=18;

然后再main.js中引用

//2，使用ES6的模块化规范导入
    import{ name,age} from "./js/info";
    console.log(name);
    console.log(age);

# 3，webpack打包命令 #

## 3.1，全局webpack ##

上面说了一种打包方式

webpack ./src/main.js ./dist/bundle.js

这里说一种配置文件配置了以后，打包命令只输入webpack就可以了。

首先需要进行

npm init //初始化
    npm install //安装

然后就生成了package.json文件（过程中要输入文件夹名和js文件名，都是选填）

配置文件名字必须是webpack.config.js

这样，打包可以直接输入命令：webpack

在package.json文件中，“scripts”是脚本配置，也就是说，配置了“build”:"webpack"之后，就可以在终端输入命令行

npm run build 从而执行webpack，也就是打包。

{
      "name": "meetwebpack",
      "version": "1.0.0",
      "description": "",
      "main": "webpack.config.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build":"webpack"
      },
      "author": "",
      "license": "ISC"
    }

## 3.2，局部安装webpack（本地） ##

上面的安装webpack是全局的webpack，本地安装webpack命令

npm install webpack@3.6.0 --save-dev

然后重新打开package.json文件，会发现多了个依赖

"devDependencies": { 
        "webpack": "^3.6.0"
      }

注：在终端执行webpack命令的使用的都是全局的webpack，如果使用本地的webpack的话，先安装，安装好，在终端执行命令

npm run build

会首先去脚本找build，上面已经设置过了，会执行webpack打包，如果找不到的话，会自动找全局的webpack。

## 3.3，webpack打包css文件 ##

css文件也不需要html的引入，也要打包到main.js入口文件中。

新建一个normal.css文件，写一个简单的样式。

body{ 
        background-color: rebeccapurple;
    }

然后再main.js入口文件中引入

//引入css
    require('./css/normal.css')

然后进行打包，提示错误了，是因为没有安装loader

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1mnvSCU-1570498720131)(D:\\文件笔记\\image\\1569814517000.png)\]][img-F1mnvSCU-1570498720131_D_image_1569814517000.png]

## 3.4，安装loader ##

需要先安装style-loader，然后再安装css-loader

终端命令：

npm install --save-dev css-loader
    npm install style-loader--save-dev

安装好之后，还需要在webpack.config.js文件中进行loader的配置

const path=require('path');
    
    //在配置文件中加入配置，在终端webpack打包时就不用指定文件了，直接命令webpack就可以了
    module.exports={ 
        entry:'./src/main.js',
        output:{ 
            path:path.resolve(__dirname,'dist'),//_dirname是node上下文的一个全局变量，是当前config.js所在文件夹的路径，然后拼接一个dist，为完整路径
            filename:'bundle.js'
        },
        module:{ 
            rules:[
                { 
                    test:/\.css$/,
                    /* css-loader只负责将css文件进行加载 style-loader负责将样式添加到dom中 使用多个loader时，是从右向左 */
                    use:['style-loader','css-loader']
                }
            ]
        }
    }

然后就打包成功了，页面就有样式了。

## 3.5，webpack打包less文件 ##

先写一个less文件special.less（设置了全局字体的样式）

@fontSize:50px;
    @fontColor:orange;
    
    body{ 
        font-size: @fontSize;
        color: @fontColor; 
        }

然后下载less-loader，命令行

npm install -save-dev less-loader less

然后在webpack.config.js中加入less-loader的配置（这些配置都去webpack官网上面找）

加入less-loader的规则

rules:[
                { 
                    test:/\.css$/,
                    /* css-loader只负责将css文件进行加载 style-loader负责将样式添加到dom中 使用多个loader时，是从右向左 */
                    use:['style-loader','css-loader']
                },
                { 
                    test: /\.less$/,
                    use: [{ 
                        loader: "style-loader" // creates style nodes from JS strings
                    }, { 
                        loader: "css-loader" // translates CSS into CommonJS
                    }, { 
                        loader: "less-loader" // compiles Less to CSS
                    }]
                }
            ]

然后就可以打包了，命令行

npm run build

这样样式都加载到了html页面。

## 3.6，webpack打包图片文件 ##

终端命令行

npm install --save-dev url-loader

然后在webpack.config.js配置中加入url-loader的配置规则

{ 
                    test: /\.(png|jpg|gif)$/,
                    use: [
                      { 
                        loader: 'url-loader',
                        options: { 
                            //当加载的图片小于limit时，会将图片编译成base64字符串形式。
                            //当加载的图片大于limit时，需要使用file-loader模块进行加载。
                          limit: 8192
                        }
                      }
                    ]
                  }

然后重新打包就可以使用了，比如说css中设置了一个背景颜色background:url(./test.jpg)，然后图片可以正常显示。

如果图片大小超过了limit限制的大小的话，另外需要安装file-loader。

file-loader安装命令行：

npm install --save-dev file-loader

在webpack.config.js配置中加入file-loader的配置规则

module.exports = { 
      module: { 
        rules: [
          { 
            test: /\.(png|jpg|gif)$/,
            use: [
              { 
                loader: 'file-loader',
                options: { }
              }
            ]
          }
        ]
      }
    }

## 3.7webpack-ES6转ES5的babel ##

webpack打包的js文件，ES6语法并没有转成ES5，意味着可能对一些ES6还不支持的浏览器没有办法很好的运行我们的代码。

如果希望将ES6的代码转成ES5，那么就需要使用到babel。（和官网有些差别）

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

然后配置规则

{ 
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: { 
                      loader: 'babel-loader',
                      options: { 
                        presets: ['es2015']
                      }
                    }
                  }

然后重新打包，bundle.js中就没有ES6的东西了。

# 4，webpack-使用Vue的配置过程 #

安装vue的命令行，因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖（不需要–save-dev安装）

npm install vue --save

然后在webpack.config.js中加入配置（resolve和module是同级的），不加会报错。

resolve:{ 
            alias:{ 
                'vue$':'vue/dist/vue.esm.js'
            }
        }

然后就可以使用vue了，在main.js入口文件中引入vue，并创建vue实例

//引入vue
    import Vue from 'vue';
    const app=new Vue({ 
        el:'#app',
        data:{ 
            message:'王盼'
        }
    });

在html页面创建元素

<div id="app">
          {
       {message}}
      </div>

页面数据正常显示。

# 5，创建Vue时template和el的关系 #

规范：在html页面通常只允许出现

其他的都要在创建实例的template中写，这样写，template的内容会替换掉el的内容（el就是上面html的东西）

//引入vue
    import Vue from 'vue';
    const app=new Vue({ 
        el:'#app',
        template:` <div> <div>{ {message}}</div> <button @click="btnClick">按钮</button> </div> `,
        data:{ 
            message:'王盼'
        },
        methods:{ 
            btnClick:function(){ 
                
            }
        }
    });

# 6，Vue的终极使用方案 #

在html页面的内容

新建一个文件夹vue，这里专门写vue的代码。

在vue文件夹中新建一个App.vue文件，用于写组件，vs code下载一个插件

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGXCmKo9-1570498720134)(D:\\文件笔记\\image\\1569834420208.png)\]][img-WGXCmKo9-1570498720134_D_image_1569834420208.png]

然后新建.vue的文件后就有模板了。

在新建的App.vue文件中定义一个组件

<template>
    <div>
            <div id="message">{
       {message}}</div>
            <button @click="btnClick">按钮</button>
            </div>
    </template>
    <script>
    export default {
         data(){
            return {
                message:'大哥'
            }
        },
        methods:{
            btnClick(){
    
            }
        }
    }
    </script>
    <style scoped>
        .message{
            color: black;
        }
    </style>

在main.js的入口文件中导入这个组件并且使用

import App from './vue/App.vue';
    const app=new Vue({ 
        el:'#app',
        template:'<App/>',
        components:{ 
            App
        }
    });

这样，html页面和入口文件main.js更简洁明了了。

但是还需要安装vue-loader和vue-template-compiler才能识别.vue文件。

终端命令行

npm install vue-loader vue-template-compiler --save-dev

安装好之后在webpack.config.js文件中加入配置

{ 
       test:/\.vue$/,
       use:['vue-loader']
    }

然后重新打包，会发现出错了

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GKgvuNRQ-1570498720135)(D:\\文件笔记\\image\\1569835804235.png)\]][img-GKgvuNRQ-1570498720135_D_image_1569835804235.png]

解决方法：到package.json文件中把vue-loader的版本换成低版本的，比如

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0qJ74Rsn-1570498720136)(D:\\文件笔记\\image\\1569836519153.png)\]][img-0qJ74Rsn-1570498720136_D_image_1569836519153.png]

然后重新安装，执行命令npm install

然后再重新打包，就不报错了。

vue其实就是很多个组件组成的一张组件网。现在新建一个Cpn.vue文件，写一个组件Cpns

<template>
        <div>
            <h2>我叫樊江锋</h2>
            <p>马上就下班了</p>
            {
       {message}}
        </div>
    </template>
    <script>
    export default {
        name:'Cpns',
        data(){
            return {
                message:'你好帅'
            }
        }
    }
    </script>

然后把组件可以注册到上面的APP.vue组件中

<template>
    <div>
            <div id="message">{
       {message}}</div>
            <button @click="btnClick">按钮</button>
            <cpns/>
    </div>
    </template>
    <script>
    import Cpns from './Cpn.vue'
    
    export default {
        components:{
            Cpns
        },
         data(){
            return {
                message:'大哥'
            }
        },
        methods:{
            btnClick(){
    
            }
        }
    }
    </script>
    <style scoped>
        .message{
            color: black;
        }
    </style>

这样就实现了多个组件并列使用，webpack重新打包，页面上会有App和Cpns两个组件。

# 7，webpack横幅plugin的使用 #

横幅plugin，也就是`BannerPlugin`，打包后对版权进行声明。

在webpack.config.js文件中先声明一个webpack

const webpack=require('webpack');

然后在resolve平级的地方添加

plugins:[
          new webpack.BannerPlugin('最终版权归樊江锋先生所有')
        ]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hRBP9fmr-1570498720138)(D:\\文件笔记\\image\\1570496819869.png)\]][img-hRBP9fmr-1570498720138_D_image_1570496819869.png]

# 8，webpack-HtmlWebpackPlugin的使用 #

`HtmlWebnpackPlugin`插件可以做什么？

*  自动生成一个index.html文件（可以指定模板来生成）
 *  将打包的js文件，自动通过script标签插入到body中

上面讲的横幅插件是属于webpack的，所以引用了一下webpack即可，但是这个插件不是属于webpack的，所以需要先终端npm命令安装此插件。

npm install html-webpack-plugin --save-dev

在`webpack.config.js`文件中

plugins:[
          new webpack.BannerPlugin('最终版权归樊江锋先生所有'),
          new HtmlWebpackPlugin({ 
            template:'index.html'
          })
        ]

index.html是指定的模板进行html页面的生成。

[img]: /images/20230601/d3ce0b6fd4ed456a9d51b2a4416ee1d2.png
[img-F1mnvSCU-1570498720131_D_image_1569814517000.png]: /images/20230601/ff8883dfa3674ce7959cce4d065cb749.png
[img-WGXCmKo9-1570498720134_D_image_1569834420208.png]: /images/20230601/ce70b588c7cf4f2185bd77d1d884a960.png
[img-GKgvuNRQ-1570498720135_D_image_1569835804235.png]: /images/20230601/dd6f58d9cf19483e8c434ff5cb5c7e5b.png
[img-0qJ74Rsn-1570498720136_D_image_1569836519153.png]: /images/20230601/c1d85ace64e544b1b7010c30f522a776.png
[img-hRBP9fmr-1570498720138_D_image_1570496819869.png]: /images/20230601/8756fbb32ac34f2a9a1b9952ff3043ac.png