Webpack入门到进阶

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