webpack入门

2019-07-02

1、webpack 介绍

当我们打开webpack 中文文档首页时，最底下的几个大字让一切变得简单，我就觉得它很牛逼，很不简单。官网上的 webpack 概念：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，显然 webpack 是一个项目静态模块打包器。不过后面还有一句就是：当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。这个的意思就是 webpack 会自动分析你的项目结构，各个的模块依赖关系，然后打包成相应的 bundle，至于模块就理解为一个 js 文件为一个模块，css 也是一样。

2、创建 webpack 项目

1.新建文件夹，名为 webpackdemo，创建 src 文件夹并且包含 app.js； 2.打开终端进入 webpackdemo 文件夹，输入 npm init,执行完了会出现 package.json 文件； 3.安装 webpack 和 webpack-cli，输入 npm i webpack webpack-cli -D 4.在 package.json 中添加

1
2
3

"scripts": {
    "build": "webpack --mode production"
}

5.在同 package.json 文件目录下新建 webpack.config.js 文件

3、webpack 的四个核心

1.入口（entry）：就是你需要进行打包的模块，需要的是模块的路径。

简单的配置：

//webpack.config.js文件

const path = require("path");

//单个入口文件
module.exports = {
  entry: "./src/app.js", //入口文件
};

//多个入口文件
module.exports = {
  entry: ["./src/app.js", "./src/a.js"], //入口文件
};

2.打包出口（output）：是将入口文件打包为 bundle.js 文件，新建一个 html 文件引入 bundle.js，就可以看到相应的内容。

简单配置：

//webpack.config.js文件

const path = require("path");

//单个入口文件
module.exports = {
  entry: ["./src/app.js", "./src/a.js"], //入口文件
  output: {
    path: path.resolve(__dirname, "dist"), //打包后生成的文件放置的路径
    filename: "bundle.js", //打包后生成的文件名称
  },
};

这是你会看到一个__dirname，它就是追加了自身的目录路径，就是自动添加上项目目录路径。

测试：我们在 app.js 文件

1 2	//app.js console.log("hi!webpack");

a.js 文件

1 2	//a.js console.log("a");

然后执行 npm run build
在根目录下创建 index.html 并在引入 bundle.js 文件，然后用浏览器打开 index.html 文件。
这是的项目目录为

浏览器控制台打印为

3.loader：loader 让 webpack 能处理非 js 文件，因为 webpack 只是理解 js。

在 webpack 的配置中 loader 有两个目标：
1）test 属性：用于标识出应该被对应的 loader 进行转换的某个或某些文件，即是标识你要进行处理的非 js 文件。
2）use 属性：标识在处理非 js 文件使用哪个 loader。
简单配置:

//webpack.config.js文件

const path = require("path");

//单个入口文件
module.exports = {
  entry: ["./src/app.js", "./src/a.js"], //入口文件

  output: {
    path: path.resolve(__dirname, "dist"), //打包后生成的文件放置的路径
    filename: "bundle.js", //打包后生成的文件名称
  },

  module: {
    rules: [
      {
        test: /\.txt$/,
        use: "raw-loader", //需要安装raw-loader。
      },
    ], //当webpack遇到require()/import 语句中被解析为 '.txt' 的路径时，先使用raw-loader转换下
  },
};

4.插件（plugins）：插件的部分就是 webpack 的功能强大的部分，使用什么插件就能实现什么功能，每个插件就相当于任务。

简单的配置：（使用 html-webpack-plugin）生成 html

1）安装 html-webpack-plugin：npm i –save-dev html-webpack-plugin
2）webpack.config.js 配置

//webpack.config.js文件

const path = require("path");
const webpack = require("webpack");

//引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");

//单个入口文件
module.exports = {
  entry: ["./src/app.js", "./src/a.js"], //入口文件

  output: {
    path: path.resolve(__dirname, "dist"), //打包后生成的文件放置的路径
    filename: "bundle.js", //打包后生成的文件名称
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html", //输出的html名称，默认index.html
      template: "./index.html", //配置要被编译的html文件，即是html的源文件
    }),
  ],
};

在 dist 文件夹下用浏览器打开，控制台为

5.模式（mode）：通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化。–mode 模式 (必选，不然会有 WARNING)，是 webpack4 新增的参数选项，默认是 production
通过项目 webpackdemo 来进行配置，很容易上手，但是还有很多要探究，比如使用多个插件问题，多个 html 问题等。由于这笔记是入门篇所以没有做出太多的深究，还需要多学习学习，不断踩坑挖坑。

一个爱听歌的搬砖工

webpack入门

1、webpack 介绍

2、创建 webpack 项目

3、webpack 的四个核心