简单使用 -- webpack · 前端工程化学习笔记

>[success] # 初次使用webpack 1. webpack的安装目前分为两个：**webpack、webpack-cli**, * **webpack 是 Webpack 的核心模块** * **webpack-cli 是 Webpack 的 CLI 程序**，用来在**命令行中调用 Webpack** 2. 执行**webpack**命令，会执行**node_modules下的.bin目录下的webpack**,**webpack**在执行时是依赖**webpack-cli**的，如果没有安装就**会报错**,**webpack-cli中代码执行时**，才是真正利用**webpack进行编译和打包的过程** 3. 安装指令 ~~~ bash npm install webpack webpack-cli –g # 全局安装 npm install webpack webpack-cli –D # 局部安装 ~~~ * 注当然你在使用**webpack-cli 所提供的 CLI'提供的一些指令时候可以通过npx** >[danger] ##### 简单的使用步骤 1. 首先在我们要创建项目的文件下创建一个`package.json` -- 指令 `npm init -y` 2. 执行安装 `webpack` 指令 ~~~ bash npm install webpack webpack-cli –g # 全局安装 npm install webpack webpack-cli –D # 局部安装 ~~~ 3. 安装后想查看版本 * 在 `windows` 环境下想查看 `webpack `版本使用 `.\node_modules\.bin\webpack -v` * 在 `linux `环境下想查看 `webpack `版本使用 `./node_modules/.bin/webpack -v` * 最简单的办法指令 `npx webpack --version` 或者 `npx webpack -v` 4. 创建一个 `webpack` 的配置文件，默认配置文件是当前文件下的-- `webpack.config.js`,想自定义指定配置文件的目录使用 `npx webpack --config 指定目录` 或者` .\node_modules\.bin\webpack webpack --config 指定目录` 5. 当然所有指令也可以配置在 `package.json`中 `scripts ` 配置指令（`.\node_modules\.bin执行对应的配`） ~~~ "scripts": { "build": "webpack" // "build": "webpack --config 指定目录" } ~~~ 现在可以通过该`npm run build` 来执行webpack >[info] ## 快速使用案例 1. **webpack 支持零配置**，也就是不用去配置提供的配置文件，**webpack 会按照自身内置默认条件进行打包**，也就是不用去创建`webpack.config.js` 文件webpack 也可以快速按照默认配置去完成一个项目打包 2. webpack默认打包**入口文件是./src/index.js**,打包后的**生成文件地址是./dist/main.js** >[danger] ##### 案例 1. 下面文件结构目录就将两个 **esm** 文件变成了一个，因此最后可以**减少文件请求** * 项目结构目录说明 ~~~ ├── 'dist' // 运行后生成的不是手动创建的 │ ├── 'main.js' // 运行后生成的不是手动创建的 │ ├── 'index.html' // 手动添加 ├── 'node_modules' // npm下载包都在这个文件夹 ├── 'src' // 整个工程文件目录 │ ├── 'hellowWebpack.js' // 写逻辑的地方 │ ├── 'index.js' // 打包的入口 ├── 'package.json' └── 'package-lock.json' // 锁版本包 ~~~ * hellowWebpack.js ~~~ document.write('webpack1') ~~~ * index.js ~~~ import './hellowWebpack' ~~~ * dist/index.html ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  <script src="./main.js"></script> </head> <body> </body> </html> ~~~