webpack打包工具学习（Day：18）

任务：学习webpack打包工具

1、什么是webpack

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

2、五大核心概念

2.1 入口（entry）指示webpack入口从那个文件打包 2.2 输出（output） output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。 2.3 loader webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。 2.4 插件(plugin) loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。 2.5 模式(mode) 开发模式和生产模式

3、webpack的环境配置

就是你五大点的内容都写在webpack.config.js中，然后通过这个文件来实现功能例：

const path = require('path');//node.js核心模块，专门用来处理路径w n
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js',//相对路径
        print: './src/print.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '管理输出',
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),//绝对路径
        clean:true,
    },

};

4、处理css less sass stylus等资源

每种资源的使用都差不多每次需要安装loader，然后把文件导入，最后在webpack.config,js中配置下面以less-loader为例首先安装这个npm install less less-loader --save-dev

然后在src文件下新建less文件

.box2{
    width: 100px;
    height: 100px;
    background-color: deeppink;
}

最后将loader的配置添加到webpack中去

 module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
        ],
    },

这四个内容你看一个基本上就都会了其他例如字体，图片和音视频资源的处理和这个类似

中文官网链接： https://webpack.docschina.org/loaders/less-loader/

4、自动清空上次打包的内容

//在打包去，将path整个目录清空，再进行打包
        clean:true,

5、路径别名

这个部分找了好久，最后找到了 resolve.alias 创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块：

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

在配置文件的模块中这样添加以后你的导入会方便不少比如以前为 import Utility from '../../utilities/utility'; 现在为： import Utility from 'Utilities/utility';

还可以在对象的键后添加$，实现精准导入

import Test1 from 'xyz'; // 精确匹配，所以 path/to/file.js 被解析和导入 import Test2 from 'xyz/file.js'; // 非精确匹配，触发普通解析

具体内容可参考： https://webpack.docschina.org/configuration/resolve/#resolvealias

XJQ124 / Some-notes