初学webpack

1. 安装node
   webpack的打包性能受到node的一些新特性的影响，新版的node可以提高webpack的性能。node最好使用nvm进行管理。哈哈

2. 初始化和安装webpack

npm init  // 执行后会产生package.json文件
// 以下为两种webpack安装方法
npm i -D webpack webpack-cli  // 在工程目录下安装，推荐使用
npm i -g webpack webpack-cli  // 全局安装，不推荐使用
// 指定版本安装的方法
npm i -D webpack@4.44.0 webpack-cli

webpack-cli可以使得我们能够在命令行中使用webpack命令，安装好webpack，webpack及其依赖文件都在node-module文件夹中

3. 将package.json中设置private为true，防止将项目发送到npm仓库

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "private": true,  // 阻止将代码发送到npm仓库
  "main": "index.js",
  "scripts": {},
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.0",
    "webpack-cli": "^3.3.12"
  }
}

4. npx和npm的区别
   npm会首先使用全局安装的webpack
   npx会首先使用在工程目录下的webpack
5. 以指定文件打包

npx webpack --config webpack.config.js  // webpack.config.js是webpack的默认配置文件

6. 使用scripts可以简化打包代码，scripts中的命令会首先在工程目录下的node-module下找指令

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "bundle": "webpack --config webpack.config.js"  // 使用npm run bundle代替原有的命令
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.0",
    "webpack-cli": "^3.3.12"
  }
}

7. 打包生成内容分析

Hash: eab71952aac03b3bb8b3  // 根据文件打包的内容生成hash值，若内容不变，则保持原有的hash值不变
Version: webpack 4.44.0
Time: 107ms   // 打包用时
Built at: 2020-07-25 13:32:52
    Asset      Size  Chunks             Chunk Names
bundle.js  5.29 KiB    main  [emitted]  main   //Asset为打包出的结果，Chunks代表自身的id值和有关联的js文件的id值  Chunk Names 代表自身的文件的名字和有关联的js文件的名字，可以在entry中配置
Entrypoint main = bundle.js
[./content.js] 193 bytes {main} [built]
[./header.js] 187 bytes {main} [built]
[./index.js] 159 bytes {main} [built]
[./sidebar.js] 193 bytes {main} [built]

8. 关于webpack的打包模式

const path = require('path')

module.exports = {
    mode: 'development',  // 代码不压缩 
    // mode: 'production',  // 默认为production模式，代码压缩
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'bundle')
    }
}