webpack 入门

webpack 安装

• 安装本地 webpack
• webpack webpack-cli -D

webpack 可以进行 0 配置

• 打包工具 -》 输出后的结果（"默认支持" js 模块）
• 输入 npx webpcak 就可以打包了

但是 输入 npx webpcka 以后他具体是什么做的呢

• 它会去 找 node_modules/.bin/webpack.cmd

1. 这是 里面的内容
2. 先去找 当前目录下 node.exe 如果没有 就去 上级目录找 \webpack\bin\webpack.js 并执行
3. \webpack\bin\webpack.js 这里面 引入了 webpack-cli

   @IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe" "%~dp0\..\webpack\bin\webpack.js" %* )
   ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:;.JS;=;% node "%~dp0\..\webpack\bin\webpack.js" %* )
   

• webpack.js 代码

  /** @type {CliOption} */ 
  const cli = {
    name: "webpack-cli", package: "webpack-cli",
   binName: "webpack-cli", installed: isInstalled("webpack-cli"), url: "https://github.com/webpack/webpack-cli"
   };
  

为什么打包后的 js 是很多东西呢

1. 他压缩减少了体积
2. 因为我们是默认支持模块化的 所以它是支持了 这个才很多

手动配置 webpack webpack.config.js

• npx webpack 当执行 npx webpack 它会默认找 webpack.config.js 但我想改变这个名 就需要用到 npx webpack --config + 名字
• 但是 如果名字太长 那又不好写 我们就写在 'package.json' 的 scrpt 里

{ "devDependencies": { "webpack": "^5.24.2", "webpack-cli": "^4.5.0" }, 
  "script":{ "dev":"webpack --config webpack.js" }, 
  "name": "webpack", "version": "1.0.0", 
  "main": "index.js", "author": "xyz", "license": "MIT" }

为啥这里的 没有 npx 呢

• 因为 script 默认会去.bin 目录
• 配好了之后 我们 就可以 "npm run dev" 来执行了 但有人又想吧 --config webpack.js 又写到这里来
• 我们就可以"执行"的时候 这样写 "npm run dev -- --config webpack.js"
• 这里写了"--" 是把后面的值当参数传进去

webpack-dev-server

• 他是一个 开发服务器 安装命令 yarn add webpack-dev-server -D
• 可以用 npx 执行也可以在 script 配置 默认是当前文件夹 端口 8080

1. 我们是不是可以配置它 在 webpack.config.js 配置

 devServer:{
    port:3000,
    progress:true, // 进度条
    contentBase:"./dist" //起服务的目录
  },

什么是 HtmlWebpackPlugin

1. 把 html 文件打包压缩 插入 js css
2. 这里有个坑 webpack5 , 目前会有问题 我降了一个版本 到 4 才解决 但是 HtmlWebpackPlugin 也要降到 4 npm i --save-dev html-webpack-plugin@4
3. 使用

plugins:[ // 数组 放着所有的webpack插件
    new HtmlWebpackPlugin({
      template:'./src/index.html', //模板文件
      filename:"index.html",  // 解析后的名字

      hash:true, //生成带哈希的文件
    })
  ],

什么是 mini-css-extract-plugin

1. 安装 yarn add mini-css-extract-plugin -D
2. 作用 抽离 css
3. 使用

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

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

什么是 autoprefixer 和 postcss-loader

1. 作用 给 css 加前缀
2. 安装 yarn add postcss-loader autoprefixer -D
3. 使用 一定加一个 postcss.config.js 配置文件

module.exports = { //在这里引入autoprefixer
    plugins:[require('autoprefixer')]
}