webpack4.29.x成神之路（二） 起步

目录
上节：webpack简介

一、webpack安装

首先新建一个空文件夹，在改文件夹下打开命令行，输入npm init -y 创建一个package.json文件。

然后在package.json中填好一些基本信息，一个基本的package.json内容大致如下：
package.json

{
  "name": "webpack-train",
  "version": "1.0.0",
  "description": "webpack4",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/lycHub/webpack-train.git"
  },
  "keywords": ["webpack4"],
  "author": "Madao",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/lycHub/webpack-train/issues"
  },
  "homepage": "https://github.com/lycHub/webpack-train#readme"
}

webpack推荐使用局部的安装方式，即在项目根目录下执行如下命令：

npm install webpack webpack-cli -D

然后会多出一个node_modules的目录，这个目录将会存放各种工具包。

二、准备工作

在打包前，我们先来新建一下目录和文件，并添加内容

index.html：

src/index.js：

window.addEventListener('DOMContentLoaded', function() {
  function component() {
    const root = document.getElementById('root');
    root.innerHTML = _.join(['Hello', 'webpack'], ' ');
  }
  
  component();
});

此时打开浏览器运行index.html，页面应该能出现 Hello webpack

三、webpack打包方式介绍

• 方法一：

  根目录下执行：

.\node_modules\.bin\webpack

然后webpack会执行打包命令并在根目录下生成dist文件夹：

• 方法二：

  根目录下执行：

npx webpack

npx是npm自带的一个命令，效果同方法一

• 方法三（推荐）：

在package.json的scripts选项中添加如下任务

然后在根目录下执行

npm run build

也可以打包成功并生成dist文件

四、测试打包后的代码

webpack默认会将src/index.js打包生成main.js并放入dist文件夹中，现将index.html复制到dist中并做如下修改
dist/index.html：

然后打开浏览器运行dist/index.html

这样就完成了webpack的安装与基本的打包操作，只不过打包时用的都是默认配置

下节：基本配置与mode