webpack 简介webpack 是什么 webpack 是一种前端资源构建工具，一个静态模块打包器(module b

webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

webpack 五个核心概念

1.Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

2.Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

3.Loader

Loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解JavaScript)

4.Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

5.Mode

模式(Mode)指示 webpack 使用相应模式的配置。

初始化配置

初始化 package.json

输入指令: npm init -y

下载并安装 webpack

npm install webpack webpack-cli -g
npm install webpack webpack-cli -D
# 本地安装
npm i webpack@4.41.6 webpack-cli@3.3.11 -D

编译打包应用

创建文件
运行指令开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development 功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production 功能：在开发配置功能上多一个功能，压缩代码。
结论 webpack 能够编译打包 js 和 json 文件。能将 es6 的模块化语法转换成浏览器能识别的语法。能压缩代码。
问题不能编译打包 css、img 等文件。不能将 js 的 es6 基本语法转化为 es5 以下语法

创建配置文件

创建文件 webpack.config.js
配置内容如下

const { resolve } = require( 'path'); // node 内置核心模块，用来处理路径问题。
module.exports = {
	entry: './src/js/ index .js', // 入口文件
	output: { // 输出配置
        filename: './built.js', // 输出文件名
        path: resolve(__dirname, 'build/js') // 输出文件路径配置
	},
	mode: 'development' //开发环境
};

运行指令: webpack
结论: 此时功能与上节一致

打包样式资源

下载安装 loader 包

 npm i css-loader@3.4.2 style-loader@1.1.3 less-loader@5.0.0 less@3.11.1 -D

修改配置文件

// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
module.exports = {
    // webpack 配置
    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        // __dirname nodejs 的变量，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader 的配置
    module: {
        rules: [
        // 详细 loader 配置
        // 不同文件必须配置不同 loader 处理
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些 loader 进行处理
                use: [
                    // use 数组中 loader 执行顺序：从右到左，从下到上 依次执行
                    // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
                    'style-loader',
                    // 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将 less 文件编译成 css 文件
                    // 需要下载 less-loader 和 less
                    'less-loader'
                ]
            }
        ]
    },
    // plugins 的配置
    plugins: [
    	// 详细 plugins 的配置
    ],
    // 模式
    mode: 'development', // 开发模式
    // mode: 'production'
}

运行指令: webpack

打包图片资源

下载安装 loader 包

npm install --save-dev html-loader@0.5.5 url-loader@3.0.0 file-loader@5.0.2

修改配置文件

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const pathName = (path) => resolve(__dirname, path);
module.exports = {
  mode: "development",
  entry: "./src/js/index.js",
  output: {
    path: pathName("dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.(le|c)ss$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.(jpg|png|jpeg|gif)$/,
        loader: "url-loader",
        options: {
          limit: 6 * 1024,
          name: "[name].[hash:10].[ext]",
          outputPath: "images",
          esModule: false,
          // emitFile: true,
          // context: "project",设置后，没有看到变化
          // publicPath: "assects",调用图片的时候加一层路径
        },
      },
      {
        test: /\.html$/,
        loader: "html-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

打包其他资源

修改配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 打包其他资源(除了 html/js/css 资源以外的资源)
            {
                // 排除 css/js/html 资源
                exclude: /\.(css|js|html|less)$/,
                loader: 'file-loader',
                options: {
                	name: '[hash:10].[ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
        	template: './src/index.html'
        })
    ],
	mode: 'development'
};