webpack初学篇（1）

一、什么事webpack

webpack可以看作模块打包器，功能就是分析项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Scss,TypeScript等），将其打包为合适的格式以便浏览器使用，webpack实现了打包流程的自动化和功能化。

二、基本概念

2.1 Entry

入口设置webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

2.2 Output

输出设置webpack打包后的资源bundles输出到哪里去，以及如何命名。

2.3 Loader

Loader让webpack能够去处理那些非JavaScript文件（webpack自身只能理解JavaScript）。

2.4 Plugins

插件可以用于执行范围更广的任务，插件的范围包括：打包优化、压缩、重新定义环境中的变量等。

2.5 Mode

模式设置webpack使用相应模式的配置。

image.png

三、安装webpack

// 初始化项目
npm init -y
安装
npm install webpack webpack-cli --save-dev

• 注意：
  如果此时直接在项目下执行命令"webpack ./src/index.js -o ./build/built.js --mode=development",会报如下错误：
  image.png
  此时解决方案一：在命令前加npx即可；
  解决方法二：在package.json里面的scripts中添加如下代码，然后就可以直接用yarn 或npm运行了。

"scripts": {
    "build": "webpack ./src/index.js -o ./build/built.js --mode=development"
  },

四、初步体验

image.png

结论：
（1）webpack能处理js/json
（2）不能打包css/img等其他资源
（3）生产环境比开发环境多一个压缩js代码
（4）生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化

五、打包样式和html资源

webpack.config.js  webpack的配置文件
作用：指示webpack进行什么操作(当运行webpack时会加载里面的配置)
所有构建工具都是基于nodeJs平台运行的，模块化默认采用commonJs;

// resolve用来拼接绝对路劲的方法
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // webpack配置
  // 入口起点
  entry: "./src/index.js",
  // 输出
  output: {
    // 输出文件名
    filename: "built.js",
    // 输出路劲
    // __dirname nodejs的变量，代表当前文件的目录，绝对路劲
    path: resolve(__dirname, "build"),
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader配置
      {
        // 正则匹配文件
        test: /\.css$/,
        // 使用哪些loader进行处理，不同文件必须配置不同的loader处理
        // use数组中的loader执行顺序:从右到左，从下到上，依次执行；
        use: [
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          "style-loader",
          // 将css文件变成commonJs模块加载到js中，里面内容是样式字符串
          "css-loader",
        ],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"], // less-loader将less文件编译成css文件，需要下less-loader和less
      },
{
        // 处理图片资源
        // 改方法默认处理不了html中img标签引入的图片
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader不用写use,可直接写loader，此处需要下载url-loader、file-loader
        loader: 'url-loader',
        options: {
            // 图片大小小于8KB,就会被base64处理
            // 优点：减少请求数量（减少服务器压力）
            // 缺点：图片体积会更大（问价请求速度更慢）
            limit: 8 * 1024,
        }
      },
    ],
  },
  // plugin配置
  // html-webpack-plugin：会默认创建一个空的html,自动引入打包输出的所有资源（JS/CSS）;
  plugins: [new HtmlWebpackPlugin({
      // 复制'./src/index.html'文件，并自动引入打包输出的所有资源
      template: './src/index.html',
  })],
  // 模式
  mode: "development",
  //   mode: 'production',
};

在入口文件index.js中引入样式文件：

import './index.css';
import './index.less';

在index.html中引入打包后的资源：

<script src="./build/built.js"></script>

总结：loader的使用：下载—>配置使用
plugin的使用：下载—>引入—>配置使用