前言

前端技术日新月异的发生着变化，涌现出了很多的框架以UI为主的三大框架(react,vue,angular)，与样式相关的less、sass。语法相关的es6 typescript以及npm上面成千上万的第三方工具包，各种可以提高开发效率的新思路和框架层出不穷，但是他们都有一个共同的特点不能够直接运行，必须转换后才能正确运行。WebPack 就是做这件事的，将源代码转换成可以执行的 JavaScript HTML CSS代码。

关于WebPack的内容有很多，我只挑出我常用到的做一下笔记内容，主要有五节内容：

万物皆可webpack：使用webpack 打包常见的文件
React 项目: 打包React的配置
打包优化1
打包优化2: 打包优化分为两节内容，节省打包时间。
多文件打包：多个文件入口如何配置

四大核心

这是我自己总结的四大核心：

entry: 打包的入口文件
**output：**打包后输出文件
**module：**代码转换;如 less 转换为css，静态资源打包
**plugins：**补充modules的不足，webpack本身的大多数特性都使用这个插件接口。这使得webpack更加灵活。

当然了webpack 除了这些还有很多很多十分重要的内容，比如loader，mode，devTool，sourceMap等等，其他内容我们在面都能涉及到。

为什么说这四个是四大核心呢？因为使用这四个内容可以打包我们常见的各种类型文件，接下来我们就试一下吧：

创建项目

在创建项目之前，我们系统需要有node，npm；

再介绍一下npx，在安装npm的时候会自动安装npx，我们安装依赖在本项目中会生成一个node_modules文件夹，使用npx 调用的是本项目的依赖，而不是全局的依赖。

npm init 初始化项目

mkdir webpack-demo
cd webpack-demo
npm init -y 
# -y 表示一切默认选择
npm install --save-dev webpack webpack-cli # 可以简写为 npm i -D webpack webpack-cli
# 安装webpack

会在文件夹下生成package.json

创建webpack.config.js 文件

使用npx webpack 就会打包文件，打包配置默认为webpack.config.js，我们创建src 文件夹，所有的文件都在这里面。

开始配置

const path = require('path')

module.exports = {
  entry:'./src/index.js',
  output: {
    filename: '[name].js',
    path: path.resolve(process.cwd(), 'dist'),
  },
}
# 会在项目里面生成 dist 文件夹，把src下面的index文件打包至dist文件夹下，
# entry: 可以写上面的字符串也可以写成对象如下
module.exports = {
  entry:{
    main:'./src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(process.cwd(), 'dist'),
  },
}
# output: [name]表示entry里面的key，这里就表示main，所以 src 下的index 会打包为main文件，如果entry是字符串默认为main

index.js

const element = document.createElement("div");
element.className = "custom";
element.innerText = "Hello World";

const dom = document.getElementById("root");
dom.appendChild(element)

# 都能看懂

打包

npx webpack

这里的index.html 是我自建创建的，创建完成后把main.js 引入到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>
</head>
<body>
  <div id="root"></div>
  <script src="./main.js"></script>
</body>
</html>

可以看到我们在js里面写的内容都生效了

使用loader

loader 主要是用来翻译代码的，把代码翻译成浏览器能够运行的源码

上面打包的是js文件所以不需要翻译，如果我们在项目里面用到了图片，less，sass，字体文件呢？

所以就用到了loader，以下loader都需要先安装哦

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: path.resolve(process.cwd(), 'dist'),
  },
  # 这里只举例less-loader，loader 的读取是从右到左的
  module: {
    rules: [{
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'] # css-loader 读取css文件翻译成样式，style-loader把样式生效
    },
      # less，先把less 文件读取为css 文件，在使用css-loader读取为样式，style-loader 把样式生效
    {
      test: /\.less$/i,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true // style.className
          }
        },
        'less-loader',
      ]
    }]
  }
}

使用plugins

以上的操作都是先把文件打包，然后创建一个html，把打包的文件引入到html文件中。十分的麻烦，所以可以使用plugins，在每次打包的时候都生成一个html文件，并把文件引入，不需要我们自己操作。

plugins：是一个数组

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
# 安装插件 npm i -D html-webpack-plugin
module.exports = {
  ...
  plugins:[
    new HtmlWebpackPlugin({
      template: './index.html' // 使用当前目录的index.html为模板，每次打包把打包后的文件引入到模板文件里面，并打包到dist
    }),
  ]
}

结语

这节简单的说了下webpack的打包配置，是webpack打包的就牛一毛，包括本节内容，我也没有说太多，主要是配置，更多内容还需要查看官方文档，这个只属于一个入门级别的。欢迎查看下节打包配置react项目。

WebPack基础入门(一)：万物皆可webpack

推荐阅读

前言

四大核心

创建项目

结语