webpack

2021.11.4

什么是webpack？

前端的一些功能模块打包，静态资源的构建，目的为了方便的构建项目

所有的资源都会作为模块(chunk)处理—>依赖关系—>静态资源(bundle)

五个概念：

entry:入口，指示webpack从哪个文件开始打包

output:出口，bundle输出到哪个文件

loader:处理非js的资源，比如less就用loader来处理

plugin:插件，用来处理更复杂的功能，比如压缩文件

mode:分为两种模式一种是development，这个是本地开发所需要的环境，还有一种模式是production，这种模式需要项目上线运行时所需要的运行环境

安装及使用

npm init
(npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。)

npm i webpack webpack-cli -g
(-g全局安装,-D即--dev仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器)

运行指令
webpack --entry ./src/index.js -o ./build --mode=development 此指令会在build下自动生成一个main.js文件，而不用自己创建

运行后：每次打包唯一生成的hash值，打包时间，打包前后文件大小(development可以将ES6模块化编译成浏览器识别的模块化，production模式会压缩js文件)

Webpack能处理JS/JSON文件，但是不能处理CSS样式文件，这里就需要用到loader

webpack.config.js

运行webpack时，会加载里面的配置，这个文件会指示webpack该干什么。

//构建工具基于node.js,模块化用的commonjs
const { resolve } = require('path'); //node.js语法，用来拼接绝对路径
module.exports = {
    entry: "",
    output: {
        filename: "built.js", //输出文件名
        path: (resolve(__dirname, 'build')) //_dirname是当前目录的绝对路径
    },
    module: {
        //不同的文件必须要配置不同的loader处理，所以如果要处理less，就要再写一个rules配置
        rules: [{
            test: /\.css$/,//监测文件类型
            use: [
                'style-loader', //创建style标签插入head中生效
                'css-loader' //把css文件变成commonjs模块加载到js中
            ]//决定用哪种loader去处理
        }, ],
        rules: [{
            test: /\.less$/, //不能复用，每一个rules中的test只能处理一个内容
            use: [
                'style-loader', //创建style标签插入head中生效
                'css-loader', //把css文件变成commonjs模块加载到js中
                'less-loader' //把less->css
            ]
        }, ]
    }, //loader的读取顺序是从下到上，从右到左,使用loader的时候都用npm包安装，npm i css-loader.
    plugins: [],
    mode: 'development' //production
}