第一章 webpack初探

环境安装

• node.js
  image.png
  如图：10.13.0为稳定版本，11.2.0为最新版本 。安装推荐稳定版本
  --安装验证
  image.png

1.安装 packaje.json

npm init 项目名    //一路回车
npm init -y //使用默认配置

2.安装 webpack webpack-cli (node_modules)

cnpm i webpack webpack-cli -g //全局安装（不推荐）
cnpm info webpack //查看现有webpack版本
cnpm i webpack@4.25.0 webpack-cli -D //指定版本安装
cnpm uninstall webpack webpack-cli -g //全局删除
-------------------------------------------
局部安装：
cnpm i webpack-cli  -D   //默认会安装webpack
cnpm i webpack -S //不放心 可以再安装一遍webpack

---

模块引入方式
-ES Moudule 模块引入方式

import header from './header.js'; //引入模块方法
export default header;      //导出模块方法
import style from './index.css'; //引入css文件

-CommonJS 模块引入规范

var Header = require('./header.js'); //引入模块方法
module.exports = Header; //导出模块方法
var Style = require('./index.css');  //引入css文件

-CMD
-ADM

3.使用webpack进行打包

npx webpack 入口文件 -o 出口文件

---

注意：-o 表示 output 输出（./dist/bundle.js 就是输出的位置和 js 名称），
--mode=development 表示指定模式
mode 为开发模式 development。

---

开发模式下打包：

webpack ./src/index.js -o ./dist/bundle_production.js --mode=development

mode 为生产模式 production
生产模式下打包：

webpack ./src/index.js -o ./dist/bundle_production.js --mode=production

4.webpack的配置

webpack.config.js
-----------------------------------
const path = require('path');
module.exports = {
  mode:'production',//模式production/development
  entry:'./index.js',
  output:{
    filename:'main.js',
    path:path.resolve(__dirname,'dist')
  }
}

注意：webapck默认配置文件名为 “webpack.config.js”，如果把配置文件名换成 “webpackconfig.js”就需要用npx webpack --config webpackconfig.js //指定配置文件

package.json
-----------------------------------
{
  "name": "lesson1",
  "version": "1.0.0",
  "description": "",
  "private":true, //私密代码，不公开
  "scripts": {
    "bundle":"webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-cli": "^4.1.0"
  },
  "dependencies": {
    "webpack": "^5.3.2"
  }
}

用npm run bundle 来替换 npx webpack

对webpack命令行中打印出来的语句进行解析

晓鸣@DESKTOP-OTVJ8Q9 MINGW32 /f/【508】手把手带你掌握新版Webpack4.0完整/webpack4 练习/第一章/lesson1

$ npm run bundle

> lesson1@1.0.0 bundle F:\【508】手把手带你掌握新版Webpack4.0完整\webpack4 练习\第一章\lesson1
> webpack

[webpack-cli] Compilation finished
Hash: 9fa501482a5c672ff8c3       //本次打包对应的唯一一个Hash值
Version: webpack 4.43.0              //本次打包使用的webpack的版本为4.43.0
Time: 87ms                                  //当前包整体打包耗时为87ms
Built at: 2020-11-03 3:46:06 PM
 
  Asset      Size  Chunks             Chunk Names //打包出的js文件   //文件大小     //打包出的文件对应id    //每个包对应的名字
main.js  1.21 KiB       0  [emitted]  main//入口
Entrypoint main = main.js //入口文件名
[0] ./src/index.js 183 bytes {0} [built]
[1] ./src/header.js 204 bytes {0} [built]
[2] ./src/sidebar.js 206 bytes {0} [built]

作业：
webpack.js.org英文文档阅读