Webpack入门到进阶

客官°小女子只卖身不卖艺 2023-03-04 09:25 35阅读 0赞

# Webpack入门到进阶 #

### 1. 概念 ###

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle(包)。

### 2. 核心概念 ###

entry:入口 ==> 指示 webpack 应该使用哪个模块开始进行打包
    output: 输出(出口) ==> 告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 	         ./dist
    loader: 因为webpack 自身只理解 `js和json文件`，loader 让 webpack 能够去处理那些非 `js和json 文件`
    plugins: loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务,例如:`打包优化`、`压缩`和` 重新定义环境中的变量`
    mode: 模式 ==> 设置当前环境为`development(开发环境)/production(生产环境)`,默认值为`production`

### 3. 开启项目 ###

1. 初始化`package.json` ==> npm init -y/yarn init -y
    2. 安装webpack
    	npm i webpack webpack-cli -D
    3. 可在`package.json中配置启动指令`
        "scripts":{ 
            "start": "webpack"
        }
    4. 运行webpack在终端输入`npm start`

### 4. 使用webpack配置文件 ###

1. 项目根目录下新建一个`webpack.config.js`
    2. 项目目录结构
    	node_modules/
        src/
            js/
    			main.js
    		index.html
    	webpack.config.js
    	package.json
    2. 基本配置:
    	// webpack的配置文件,运行webpack相关指令时，会先运行这个配置文件
    	// 因为webpack内部涉及到文件读写等相关操作，所以采用CommonJS语法
        const {  resolve } = require('path') // 引入node.js核心模块path，用来处理文件路径
        module.exports = { 
          // 入口文件
          entry: './src/js/main.js',
          // 输出
          output: { 
            filename: 'xh.js', // 输出后的文件名为 xh.js
            path: resolve(__dirname, 'build') // 输出目录路径，目录名为build
          },
          // loader配置
          module: { 
            rules: []
          },
          // 插件配置
          plugins: [],
          // 模式
          mode: 'development'
        }

### 5. 处理css文件 ###

在rules中:
    	// 处理css文件
          { 
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          },

### 6. 处理less文件 ###

// 处理less文件
          { 
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
          },

### 7. 处理样式中图片资源 ###

// 处理样式中图片资源
          { 
            test: /\.(png|jpe?g|gif)$/,
            loader: 'url-loader',
            options: { 
              limit: 1024 * 16, // 小于16kb的图片会被转换成base64格式
              // 输出的图片资源目录以及名字 [name] === 使用图片自身的名字 [ext] === 使用图片自身的扩展名
              name: './imgs/[name].[ext]'
            }
          },

### 8. 处理html中图片资源 ###

// 处理html中图片资源
          { 
            test: /\.html$/,
            loader: 'html-loader'
          }

### 9. 处理字体图标 ###

// 处理字体图标
          { 
            test: /\.(eot|svg|ttf|woff)$/,
            loader: 'file-loader',
            options: { 
              name: '[hash:10].[ext]',
              outputPath: 'media'
            }
          }

### 10. eslint的处理 ###

// eslint的处理
          { 
            test: /\.js$/,
            exclude: /node_modules/, // 排除node_modules
            loader: 'eslint-loader',
            options: { 
              // eslint options (if necessary)
              fix: true // 启用ESLint自动修复功能
            },
          },
    此时我们如果进行打包，会报一个警告，警告内容如下:
    	`Module Warning (from ./node_modules/eslint-loader/dist/cjs.js): No ESLint configuration found`
        意思是说我们没有配置eslint文件，我们在根目录下新建一个`.eslintrc`文件，然后配置一下,我们这里为了方便，就借助了一下别人写好的配置
    	{ 
          "extends": "airbnb-base", // 继承别人写好的库
           // 规则，0=>关闭,1=>警告,2=>报错
          "rules": { 
            "import/prefer-default-export": 0, 
            "no-console": 0
          }
    	}

### 11. css提取成单独文件 ###

// 因为style-loader最终会以一个style标签的方式插入到我们的页面上，可能会造成闪屏现象，所以我们需要把css换成link的方式，也就是说需要把css样式提取成单独文件,我们需要借助到一个插件mini-css-extract-plugin
    1. 引入 
    	const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    2. plugins中实例化 
    	// 提取css成单独文件
        new MiniCssExtractPlugin({ 
          filename: 'css/[hash:10].css',
          chunkFilename: '[id].css',
        })
    3. 替换掉style-loader，换成MiniCssExtractPlugin.loader
    	{ 
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader']
        },

### 12. 路径问题 ###

当我们把style-loader 替换成MiniCssExtractPlugin.loader，出现了路径问题，这时我们就需要把`相对路径变成绝对路径`, 
      // 输出
      output: { 
        filename: 'js/xh.js', // 输出后的文件名为 build目录下js目录下的xh.js
        path: resolve(__dirname, 'build'), // 输出目录路径，目录名为build
        publicPath: '/' // 输出后的资源前面都会带一个/，解析成绝对路径
      },
      然后把之前写的`./`干掉,
      之后我们通过`serve [打包后的目录名]`运行，它会针对我们的打包目录开启一个服务器，这样就可以解决问题了

### 13. css兼容性处理 ###

1. yarn add postcss-loader -D/npm i postcss-loader -D
    2. 例:
    	// 处理less文件
          { 
            test: /\.less$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              { 
                loader: 'postcss-loader',
                options: { 
                  ident: 'postcss',
                  plugins: (loader) => [
                    require('postcss-import')({  root: loader.resourcePath }),
                    require('postcss-cssnext')(),
                    require('cssnano')()
                  ]
                }
              },
              'less-loader'
            ]
          },
    3.	yarn add postcss-import postcss-cssnext cssnano -D或者npm
    4.  在package.json中（package.json中去除注释）
    	"browserslist": [
        "> 0.05%", // 大于市场上99.5的浏览器
        "not ie <= 8" // 兼容ie8以上（如果可以）
      	]

### 14. 压缩css ###

1. 下载 optimize-css-assets-webpack-plugin
    2. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
    3. 插件中实例化 
    	// 压缩css
        new OptimizeCSSAssetsPlugin()

### 15. js兼容性处理 ###

1. npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env
    2. 配置loader
    	// js 兼容性处理
          { 
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: { 
              loader: 'babel-loader',
              options: { 
                presets: [
                  [
                    "@babel/env",
                    { 
                      "targets": { 
                        "edge": "17",
                        "firefox": "60",
                        "chrome": "67",
                        "safari": "11.1",
                        "ie": 8
                      },
                      "useBuiltIns": "usage", // 按需加载
                      "corejs": { 
                        version: 3 // 指定corejs版本
                      }
                    },
    
                  ]
                ]
              }
            }
          }
    	}
      `如果之前配置过eslint的话，需要在eslint配置里面加一个enforce:'pre'让eslint优先执行`
      // eslint的处理
          { 
            test: /\.js$/,
            exclude: /node_modules/, // 排除node_modules
            loader: 'eslint-loader',
            enforce: 'pre', // 优先执行
            options: { 
              // eslint options (if necessary)
              fix: true // 启用ESLint自动修复功能
            },
          },

### 16. 压缩html ###

在 HtmlWebpackPlugin配置对象中添加相关压缩代码
    	new HtmlWebpackPlugin({ 
          template: resolve(__dirname, 'src/index.html'), // 以 ./src/index.html 为模板创建一个 新的html文件
          // 压缩html
          minify: { 
            collapseWhitespace: true, // 移除空格
            removeComments: true, // 移除注释
            removeRedundantAttributes: true, // 移除默认属性
            removeScriptTypeAttributes: true, // 移除默认type/script
            removeStyleLinkTypeAttributes: true, // 移除默认text/css
            useShortDoctype: true // 使用html5
          }
        }),

### 17. devtool ###

源代码映射: `因为我们运行的是打包后的文件，是经过压缩的，所以如果出错了，通过控制台查看不到源代码的错误，所以我们需要这样一个配置，让我们即使打包后的文件出错，也能追踪到源代码`
    推荐配置: 
    	开发环境: devtool: 'cheap-module-eval-source-map' // 源代码映射
    	生产环境: devtool: 'source-map' // 源代码映射

### 18. 完成开发环境自动化配置 ###

devServer: { 
        contentBase: resolve(__dirname, "build"), // 所有来自 build/ 目录的文件都做 gzip 压缩和提供 服务
        compress: true, // 开启 gzip 压缩
        port: 3000, // 端口3000
        open: true, // 自动打开浏览器
        hot: true // 开启HMR功能,只更新局部，不会刷新整个页面,js的HMR功能没有开启
      },

### 19. 区分开发环境和生产环境 ###

/** 一般我们实际开发中都会有不同配置文件，然后根据package.json中不同的指令去运行不同的配置文件 我们在根目录下新建一个config目录,写两个配置文件，一个开发环境，一个生产环境 webpack.dev.js / webpack.prod.js 然后在package.json的scripts指令中 "scripts": { "start": "webpack-dev-server --config ./config/webpack.dev.js", // 开发环境指令 "build": "webpack --config ./config/webpack.prod.js && serve build" // 生产环境指令 }, 这样，我们就可以通过指令去运行不同环境的配置 开发环境指令: yarn start / npm start 生产环境指令: yarn build / npm run build **/

### 20. 个人 ###

具体参考在我的github地址: https://github.com/Zheng-Changfu/Personal-blog
    看完觉得不错记得点个star哦~~
    下次我们来深入webpack优化、以及在vue/react中应该怎样配置webpack