webpack简单入门

忘是亡心i 2021-09-02 03:41 483阅读 0赞

# webpack #

## 1、关于webpack ##

1.  什么是webpack？
    
    webpack可以看做是将模块自动打包的工具，它会自动分析项目结构，然后将一些浏览器不能直接运行的扩展语言（TypeScript等）打包为合适的结构以便用户的浏览器能够进行解析。
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center]
2.  为什么要用webpack？
    
    因为在Vue中可能会用到大量的文件以及文件依赖以及项目结构，所以就推荐使用webpack来辅助打包。
3.  怎么使用webpack
    
    因为webpack的运行环境依赖node.js，所以需要先自行安装node.js。装好node.js之后再使用npm安装webpack
4.  安装webpack
    
    安装node.js完成后在windows命令行使用
    
        node -v  #查看node.js的环境变量是否生效
    
    如果node环境安装成功，再使用
    
        npm install webpack@3.6.0 -g
    
    进行全局安装webpack的3.6.0版本。

## 2、利用webpack进行一次模块化打包 ##

webpack可以将之前使用AMD、CommonJS、ES6规范的模块化打包方式简化，只需要将模块代码写好后利用webpack进行打包就可以了。

1.  新建项目（项目目录结构如下）
    
        │  index.html
        │
        ├─dist
        │      bundle.js
        │
        └─src
                info.js
                main.js
    
    src存放开发时的源代码，dist存放经过webpack打包后的代码
2.  新建两个js文件，其中一个导出，另外一个导入
    
    info.js：
    
        //定义变量
        let name='测试';
        let age=18;
        let message='Hello!Webpack!';
        
        //导出变量（暴露）
        export { 
          name,age,message
        }
    
    main.js：
    
        //从info文件中导入
        import * as info from "./info";
        
        console.log(info.name);
        console.log(info.age);
        console.log(info.message);
3.  在命令行执行
    
        webpack ./src/main.js ./dist/bundle.js
        #将main.js打包成为bundle.js
    
    这个时候webpack就会自动寻找模块之间的依赖关系（前提是代码没有错误），然后将所有的模块打包为一个bundle.js
4.  在html里用script标签引用bundle.js
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Title</title>
        </head>
        <body>
        <script src="./dist/bundle.js"></script>
        </body>
        </html>

利用webpack打包的好处就是你只需要专注完成模块内的代码，然后最后使用webpack进行打包，然后直接在html里引用一个js文件就可以了（因为webpack会把所有模块打包成一个js）。

## 3、webpack的配置 ##

因为很多时候我们的项目最好是在项目里面就配置好对应的依赖，webpack也算是项目里的依赖，就所谓的局部依赖，所以我们就需要给当前项目也要配置webpack。

1.  引入node
    
    因为在webpack里并不能获取当前项目的绝对路径，但是在webpack中又需要使用到它，但是node里面又有一个模块（函数）可以获得绝对路径，所以先引入node
    
        npm init -y
    
    npm init就是初始化node，-y参数就是全部选择默认（注意项目名不能有中文），接下来就会在项目的根目录里生成一个package.json文件，就是该项目的描述文件，里面的东西都可以自定义
    
        { 
          "name": "webpackStart", 	#项目名称
          "version": "1.0.0",	    #项目版本号
          "description": "",	    #项目描述
          "main": "index.js",	    #项目入口
          "scripts": {              	 #脚本命令
            "test": "echo \"Error: no test specified\" && exit 1"
          },
          "keywords": [],
          "author": "",				#作者
          "license": "ISC"			#开源协议
        }
2.  编写webpack配置文件
    
    在项目根目录里新建一个名为`webpack.config.js`文件，该文件就是webpack的配置文件，编辑如下配置：
    
        //从node的系统模块中获得path
        const path=require('path');
        
        //指定webpack打包的起点（来源）和终点（目的地）
        module.exports={ 
          //起点字符串路径
          entry:'./src/main.js',
          //终点对象
          output:{ 
            //路径（拼接字符串）
            path:path.resolve(__dirname,'dist'),
            //生成的文件名
            filename:'bundle.js',
          },
        };
    
    第一步require(‘path’)就是从node的系统模块中获取path，和在Java中导包类似，然后再用CommonJS的方式导出，再在里面编辑起点和终点，起点直接输入相对路径的字符串，但是终点的参数就必须是个对象，然后path就是利用从node中获取的模块然后将`__dirname`和`dist`拼接起来。
3.  在命名行运行webpack
    
    然后在命令行输入
    
        webpack
    
    就可以看到打包成功了。

## 4、将webpack集成到项目中 ##

因为大多数开发的时候每个开发人员自己本地环境中都会有一个webpack，所以最好是在项目中就直接指定webpack的版本，这样就不会每次项目从远端拉取到本地的时候使用本地的webpack打包，而是使用项目中自带的webpack打包，因为前端的依赖项中版本之间差距特别大。

1.  将webpack安装到项目中
    
    利用npm将webpack安装到项目中
    
        npm install webpack@3.6.0 --save-dev
    
    –save-dev的意思是保存到项目中并且将它设置为开发时依赖，此时项目中就会多一个`node_modules`文件夹，里面就会有咱们刚刚下载好的webpack，此时也会看到package.json文件中多了：
    
        "devDependencies": { 
            "webpack": "^3.6.0"
          }
    
    这就是刚刚我们下载并且指定为开发环境使用的webpack
2.  在项目的描述文件（package.json）中配置
    
    在项目中下载好了webpack后在package.json的scripts里配置脚本：
    
        "scripts": { 
            "test": "echo \"Error: no test specified\" && exit 1",
            "build": "webpack"
          },
    
    这样就可以直接在项目的命令行里输入npm run build就直接映射到webpack，并且使用项目里面的webpack进行打包了。相当于此时的`webpack`命令就被映射到了`build`命令上。

## 5、利用webpack打包css文件 ##

因为webpack本身是直接可以将js文件打包的，可是开发的时候我们需要打包除了js的文件怎么办呢？这个时候就需要用到各种各样的loader，比如css-loader（打包css文件）、style-loader（将css样式添加到DOM）

1.  把项目目录改为用包装css或者js文件
    
        │  index.html
        │  package-lock.json
        │  package.json
        │  webpack.config.js
        │
        ├─dist
        │      bundle.js
        │
        └─src
            │  main.js
            │
            ├─css
            │      index.css
            │
            └─js
                    info.js
    
    可以看到css和js文件都被放到了对应的包里，而main.js（入口则是放在了外面）
2.  写css文件
    
    index.css：
    
        body{ 
          background-color: red;
        }
3.  在js中引入css
    
    main.js：
    
        //从info文件中导入
        import * as info from "./js/info";
        
        console.log(info.name);
        console.log(info.age);
        console.log(info.message);
        
        //引入css文件
        require('./css/index.css');
4.  利用npm安装loader
    
    因为webpack是自带将js文件打包的能力的，但是并不具备将其他文件打包的能力，所以我们需要自行安装，假如说如果只安装了css-loader，那么webpack确实具备了解析css文件的能力，但是还需要安装style-loader来将css加载到DOM上。所以：
    
        npm install --save-dev css-loader@2.0.2
        npm install --save-dev style-loader@0.23.1
    
    分别都以dev开发环境下安装css-loader和style-loader
5.  在webpack.config里配置刚刚安装loader
    
    webpack.config.js：
    
        //从node的系统模块中获得path
        const path=require('path');
        
        //指定webpack打包的起点（来源）和终点（目的地）
        module.exports={ 
          //起点字符串路径
          entry:'./src/main.js',
          //终点对象
          output:{ 
            //路径（拼接字符串）
            path:path.resolve(__dirname,'dist'),
            //生成的文件名
            filename:'bundle.js',
          },
          module: { 
            rules: [
              { 
                //正则表达式匹配所有以.css结尾的文件
                test: /\.css$/,
                //style-loader是将css样式作用到DOM上
                //css-loader是将css文件处理
                //加载的顺序是从右往左加载
                use: [ 'style-loader', 'css-loader' ]
              }
            ]
          }
        };
    
    将module导出，并且在module里加载两个loader，注意加载的顺序是从右往左，所以先加载css-loader再加载style-loader
6.  利用webpack将整个项目进行打包
    
    最后依旧是利用webpack将整个项目打包：
    
        npm run build

## 6、利用webpack打包less文件 ##

有的时候可能需要利用webpack将less文件打包称css文件，这个时候就需要用到less-loader和less工具

1.  写less文件
    
        @fontSize:50px;
        @fontColor:white;
        body{
          font-size: @fontSize;
          color: @fontColor;
        }
2.  在js里面引入less
    
        //从info文件中导入
        import * as info from "./js/info";
        
        console.log(info.name);
        console.log(info.age);
        console.log(info.message);
        
        //引入css文件
        require('./css/index.css');
        
        //引入less文件
        require('./css/font.less')
3.  利用npm安装loader和less工具
    
        npm install --save-dev less-loader@4.1.0
        npm install --save-dev less@3.9.0
4.  在webpack.config.js里配置刚刚下载好的loader
    
        //从node的系统模块中获得path
        const path=require('path');
        
        //指定webpack打包的起点（来源）和终点（目的地）
        module.exports={ 
          //起点字符串路径
          entry:'./src/main.js',
          //终点对象
          output:{ 
            //路径（拼接字符串）
            path:path.resolve(__dirname,'dist'),
            //生成的文件名
            filename:'bundle.js',
          },
          module: { 
            rules: [
              { 
                //正则表达式匹配所有以.css结尾的文件
                test: /\.css$/,
                //style-loader是将css样式作用到DOM上
                //css-loader是将css文件处理
                //加载的顺序是从右往左加载
                use: [ 'style-loader', 'css-loader' ]
              },
              { 
                //正则表达式匹配所有以.less结尾的文件
                test: /\.less$/,
                //加载的顺序是从右往左加载
                //less-loader将less文件编译成css
                //css-loader将css文件转换为浏览器可读的文件
                //style-loader将样式添加到DOM上
                use: [ 'style-loader', 'css-loader','less-loader' ]
              }
            ]
          }
        };
5.  利用webpack将整体项目打包
    
    同样是利用
    
        npm run build
    
    将整个项目用webpack进行重新打包

## 7、利用webpack的url-loader打包图片资源 ##

同样假如需要利用webpack打包图片资源的时候会分两种情况，在配置loader的时候会限定图片的大小limit，假如图片的大小小于limit那么图片在打包的时候就会被base64编码转换为字符串然后进行显示（通常用于小图片），如果图片超过limit的时候打包的时候就会直接将图片以文件的格式直接存到项目里，这个时候会利用file-loader（通常用于大图片）。保险起见，最好两种方式都使用，小图片利用url-loader打包，大图片利用file-loader打包。

1.  在项目根目录新建img（自定义名）文件夹用于存放图片
2.  在需要图片的地方引入图片
    
        body{ 
          /*background-color: red;*/
          background: url("../img/baidu.jpg");
        }
3.  利用npm安装url-loader
    
        npm install url-loader@1.1.2 --save-dev
    
    依旧是在开发环境安装url-loader的1.1.2版本
4.  在webpack.config.js里配置webpack
    
        //从node的系统模块中获得path
        const path=require('path');
        
        //指定webpack打包的起点（来源）和终点（目的地）
        module.exports={ 
          //起点字符串路径
          entry:'./src/main.js',
          //终点对象
          output:{ 
            //路径（拼接字符串）
            path:path.resolve(__dirname,'dist'),
            //生成的文件名
            filename:'bundle.js',
          },
          module: { 
            rules: [
              // css-loader
              { 
                //正则表达式匹配所有以.css结尾的文件
                test: /\.css$/,
                //style-loader是将css样式作用到DOM上
                //css-loader是将css文件处理
                //加载的顺序是从右往左加载
                use: [ 'style-loader', 'css-loader' ]
              },
              // less-loader
              { 
                //正则表达式匹配所有以.less结尾的文件
                test: /\.less$/,
                //加载的顺序是从右往左加载
                //less-loader将less文件编译成css
                //css-loader将css文件转换为浏览器可读的文件
                //style-loader将样式添加到DOM上
                /*use: [ 'style-loader', 'css-loader','less-loader' ]*/
                use:[
                  { 
                    loader:'style-loader'
                  },
                  { 
                    loader:'css-loader'
                  },
                  { 
                    loader:'less-loader'
                  },
                ]
              },
              // url-loader
              { 
                // 匹配png/jpg/gif/jpeg等图片资源
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                  { 
                    loader: 'url-loader',
                    options: { 
                      // 限制大小为20kb，默认是8kb
                      limit: 20480,
                      //name: 'img/[name].[hash:8],[ext]'
                    }
                  }
                ]
              }
            ]
          }
        };
    
    url-loader里有个options的limit参数，这个参数就是限制上传图片的大小，如果上传的图片小于这个大小，webpack则会将这个图片资源利用**base64转码成为字符串**然后在浏览器前台进行显示
5.  利用webpack将项目整体打包

npm run build

## 8、利用webpack的file-loader结合url-loader打包图片资源 ##

因为url-loader打包的图片资源会有limit限制，图片大小在limit以下的资源会被base64转换为字符串编码，而大于limit以上的资源则会被以文件的形式存到项目里面，所以这个时候就需要用到file-loader，所以url-loader和file-loader最好是同时进行使用的。

1.  在项目根目录新建img包用于存放图片
2.  在需要图片的地方引入图片
3.  利用npm命令安装file-loader
    
        npm install file-loader@3.0.1 --save-dev
4.  在webpack.config.js里配置
    
        //从node的系统模块中获得path
        const path=require('path');
        
        //指定webpack打包的起点（来源）和终点（目的地）
        module.exports={ 
          //起点字符串路径
          entry:'./src/main.js',
          //终点对象
          output:{ 
            //路径（拼接字符串）
            path:path.resolve(__dirname,'dist'),
            //生成的文件名
            filename:'bundle.js',
            // 是dist目录作为静态资源的根目录
            publicPath:'dist/'
          },
          module: { 
            rules: [
              // css-loader
              { 
                //正则表达式匹配所有以.css结尾的文件
                test: /\.css$/,
                //style-loader是将css样式作用到DOM上
                //css-loader是将css文件处理
                //加载的顺序是从右往左加载
                use: [ 'style-loader', 'css-loader' ]
              },
              // less-loader
              { 
                //正则表达式匹配所有以.less结尾的文件
                test: /\.less$/,
                //加载的顺序是从右往左加载
                //less-loader将less文件编译成css
                //css-loader将css文件转换为浏览器可读的文件
                //style-loader将样式添加到DOM上
                /*use: [ 'style-loader', 'css-loader','less-loader' ]*/
                use:[
                  { 
                    loader:'style-loader'
                  },
                  { 
                    loader:'css-loader'
                  },
                  { 
                    loader:'less-loader'
                  },
                ]
              },
              // url-loader和file-loader
              { 
                // 匹配png/jpg/gif/jpeg等图片资源
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                  { 
                    loader: 'url-loader',
                    options: { 
                      // 限制大小为20kb，默认是8kb
                      limit: 20480,
                      // 打包后的图片的命名规则
                      name: 'img/[name]_[hash:8].[ext]'
                    }
                  }
                ]
              }
            ]
          }
        };
    
    因为file-loader和url-loader基本上是在一起用的，所以就可以直接写到url-loader里。同时注意name里的命名规则：`img/`表示存到终点根目录的img目录下，`[name]`文件名就是原文件名，`[hash:8]`表示利用hash算法存8位hash值，`[ext]`表示扩展名依旧是原有扩展名。加上了hash值的目的是为了防止打包后同名的图片会进行覆盖。
5.  利用webpack命令将项目整体打包
    
        npm run build

## 9、利用webpack的babel-loader将ES6语法转换为ES5 ##

虽然现在绝大多数浏览器都已经支持ES6语法了，但是为了兼容所有浏览器，ES5的语法基本上可以在所有浏览器上运行。babel工具可以帮助我们将ES6语法的代码直接转换为ES5的代码，这样就可以保证基本上所有的浏览器都可以运行。

1.  正常写ES6的代码
2.  利用npm安装babel-loader和babel的核心工具
    
        npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
3.  在webpack.config.js里配置
    
        //从node的系统模块中获得path
        const path=require('path');
        
        //指定webpack打包的起点（来源）和终点（目的地）
        module.exports={ 
          //起点字符串路径
          entry:'./src/main.js',
          //终点对象
          output:{ 
            //路径（拼接字符串）
            path:path.resolve(__dirname,'dist'),
            //生成的文件名
            filename:'bundle.js',
          },
          module: { 
            rules: [
              { 
                // 匹配以.js为后缀的文件
                test: /\.js$/,
                // 排除（不匹配）node_modules或者bower_components
                exclude: /(node_modules|bower_components)/,
                use: { 
                  loader: 'babel-loader',
                  options: { 
                    presets: ['es2015']
                  }
                }
              }
            ]
          }
        };
4.  利用webpack将整个项目打包
    
        npm run build

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/2d62c83ec8704f779d4f601a79adaa3c.png