01-webpack5理解及配置

认识webpack5

webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。在webpack看来，前端的所有资源文件（js/json/css/img/less/…）都会作为模块处理。它根据模块依赖关系进行静态分析，打包生成对应的静态资源（bundle）。

了解webpack原理和概念

• 树结构: 在一个入口文件中引入所有资源，形成所有依赖关系树状图
• 模块：模块就是模块可以是ES6模块也可以是commonJS或者AMD模块，对于webpack来说，所有的资源（css,img…）
• chunk：打包过程中被操作的模块文件叫做chunk,例如异步加载一个模块就是一个chunk
• bundel：bundle是最后打包后的文件,最终文件可以和chunk长的一模一样,但是大部分情况下他是多个chunk的集合
• 为了优化最后生产出的bundle数量可能不等于chunk的数量，因为有可能多个chunk被组合到了一个Bundle中。
  

配置webpack

1. 初始化package.json
   npm init -y
   安装webpack
   npm install webpack webpack-cli --save-dev
   最好不要全局安装
   安装之后，项目下node_moudle文件 package_lock.json文件；

"devDependencies": {
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0"
  },

2. webpakc的入口默认为 src 下的index.js，出口默认为 ./dist
   在根目录下新建一个src目录，目录下添加几个js文件
   
   index.js

const {sum} = require("./two")
console.log(sum)

one.js

const name = "100"
console.log(name)

function add(x, y){
    return x+y
}
function demo(string) {
    return string
}
module.exports={name,add,demo}

two.js

const {name,add,demo} = require("./index")

let b=20
let sum = add(name,b)

module.exports={sum}

3. webpack --mode development(开发模式) 或 production (生产模式)

• 开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development
  功能：webpack能够编译打包js和json文件，并且能够将es6的模块化语法转换成浏览器能够识别的语法。

• 生产环境指令： webpack src/js/index.js -o build/js/built.js --mode=production
  功能：在开发配置功能上多一个功能，压缩代码。
  
  配置出现该问题，因为webpack没有全局安装，只是将模块安装在了当前目录下，而我们执行命令的时候，却总是在项目目录下执行。我们的项目目录下并没有 cmd 执行文件。
  详细参考：https://blog.youkuaiyun.com/weixin_44135121/article/details/90513634

解决方法:
node_modules文件夹下，有个 .bin 文件夹。在该 .bin 文件夹下有 webpack.cmd 文件。

用编辑器打开该 cmd 文件，内容如下：

@ECHO off
SETLOCAL
CALL :find_dp0

IF EXIST "%dp0%\node.exe" (
  SET "_prog=%dp0%\node.exe"
) ELSE (
  SET "_prog=node"
  SET PATHEXT=%PATHEXT:;.JS;=;%
)

"%_prog%"  "%dp0%\..\webpack\bin\webpack.js" %*
ENDLOCAL
EXIT /b %errorlevel%
:find_dp0
SET dp0=%~dp0
EXIT /b

“%~dp0” 表示当前路径，也就是 .bin 目录，"…\ “表示上级项目，也就是 node_modules 目录，所以该文件路径也是正确的。问题就是每次只能在 项目路径/node_modules/.bin 目录下去使用 webpack 命令了。可以将.bin文件下的webpack.cmd 文件拷贝到项目的根目录下，修改”…"为“node_modules”

@ECHO off
SETLOCAL
CALL :find_dp0

IF EXIST "%dp0%\node.exe" (
  SET "_prog=%dp0%\node.exe"
) ELSE (
  SET "_prog=node"
  SET PATHEXT=%PATHEXT:;.JS;=;%
)

"%_prog%"  "%dp0%\node_modules\webpack\bin\webpack.js" %*
ENDLOCAL
EXIT /b %errorlevel%
:find_dp0
SET dp0=%~dp0
EXIT /b

就可以执行了

相应的生成了一个dist目录，目录下有个main.js，三个js文件合成一个文件

index.html中

4. 编写 webpack 配置文件
   webpack的5个核心概念

• entry
  入口（entry）指示webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图。
• output
  输出（output）指示webpack打包后的资源 bundles 输出到哪里，以及如何命名。
• loader
  loader让webpack能够去处理那些非JavaScript资源css、img等，将它们处理成webpack能够识别的资源，可以理解成一个翻译过程（webpack自身只能理解js和json）。
• plugins
  插件（plugins）可用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
• mode
  模式（mode）指示webpack使用相应模式的配置。
  开发模式（development）：配置比较简单，能让代码本地调试运行的环境。
  生产模式（production）：代码需要不断优化达到性能最好。能让代码优化上线运行的环境。
  都会自动启用一些插件，生产模式使用插件更多

–新建webpack.config.js，内容是：

const {resolve} = require("path")   //从path中接收resolve方法
module.exports={
    entry: "./src/index.js",     //入口文件
    output: {
        path: resolve(__dirname, "./build"),    //输出路径
        filename: "build.js"    //输出文件名
    },
    mode: "development",       //webpack使用相应的模式配置
    module: {                  //css打包规则
        rules: [{
            test: /\.css$/,        //把项目中所有以.css结尾的文件打包
            use: ["style-loader","css-loader"] //打包采用的loader
        }]
    }
}

6. 执行
   
   生成build目录，和build.js
   

7. 可以使用node运行打包后的资源，也可以使用HTML引入打包后的资源
   node build.js