webpack从入门及实战（一）初探webpack

何为webpack

webpack is a module bundler

webpack是一个模块打包器，可以将项目使用到的所有有依赖关系的文件打包成一系列的静态资源。
在web业务日益复杂化和多元化的今天，前端工程化已经是一个大的趋势。而模块化以及组件化则是前端工程化中最为重要的2个部分，而webpack所提供的功能，已经使他成为了前端工程化基础设施的一部分，Vue和React的官方脚手架Vue-Cli以及creat-react-app全部是通过webpack来完成的。

相较其他的工具，webpack有其独特的优势

• loader，加载器可以使所有类型的文件整合到js文件中
• 语法支持，除了ES2015的import，还支持CommonJS，AMD规范
• 丰富的插件库以及极高的自定义程度，可以根据需求自定义webpack的配置

安装webpack

webpack是一个node项目，所以在安装webpack之前，需要先安装node.js
然后在项目中npm init创建package.json文件

mkdir webpack-demo
cd webpack-demo
npm init

通常我们会使用局部安装来安装webpack，要注意除了webpack以外，还需要安装一个webpack-cli
这个webpack-cli的作用是可以让你通过命令行来操作webpack

npm i webpack webpack-cli -D

要注意的虽然可以，但官方并不推荐全局安装webpack，这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

安装完成后，我们就可以进行第一次打包了

第一次打包

在项目文件夹下新建一个src文件夹
然后在src文件夹下创建2个文件：index.js，sayHi.js

// index.js
import sayHi from './sayHi'

sayHi()

// sayHi.js
function sayHi() {
  console.log("HI");
  const root = document.getElementById('root');
  const el = document.createElement("h1");
  el.innerText = "hello world!";
  root.appendChild(el)
}
export default sayHi;

完成之后在命令行运行 npx webpack就可以进行打包了
打包之后文件夹下会多一个dist目录，下面有一个main.js文件
新建一个html文件引入刚刚打包好的main.js，可以看到效果

使用配置文件

如果不指定一个配置文件，那么webpack会按照默认的配置进行打包，但是大部分情况下还是需要我们去自定义一些配置的，这时候就要新增一个配置文件来进行配置
webpack的默认配置文件名是webpack.config.js，我们在项目文件夹下新建一个webpack.config.js文件，输入以下内容

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "myDist"),
  },
};

这时再次运行npx webpack进行打包，打包后可以看到项目中多了一个myDist目录，里面有一个bundle.js，我们将html中引入的js文件改成这个新的bundle.js，可以看到效果是一样的。
当然这只是最基础的一些config的配置，配置的详细说明会在后面的博文中提到

使用NPM Scripts

我们在使用vue以及react官方脚手架时，都是使用npm run build来进行打包，而不是npx webpack，这实际上是NPM Scripts的配置
在package.json中，我们也可以添加一条这样的script
在scripts下面新增一条build:webpack

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "author": "xz",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.1.3",
    "webpack-cli": "^4.0.0"
  }
}

这时候我们使用npm run build也可以对项目进行打包了
至此，我们已经对webpack有了一个基础的认识，知道它是用来做什么，以及一些基础的用法，并且从0搭建了一个简易的脚手架，可以对src下的index.js以及他所有的依赖进行打包，当然这个脚手架还比较简陋。后续的博文会对webpack的一些核心概念做一个说明，同时也继续完善这个脚手架，使他可以打包更多类型的文件，如图片，样式等