webpack1

webpack知识总结

webpack是一个打包模块化JavaScript的工具，他从模块化出发，识别出源码中的模块化导入语句，递归地找出文件的所有依赖，将入口和其所有的依赖打包到一个单独的文件中

是工程化，自动化思想再前端开发中的体现

安装

1，cmd进入所建文件夹

2，进行初始化安装依赖

3，(-D开发依赖，-S生产依赖)

安装最新版本npm i -D webpack

安装指定版本 npm i -D webpack@

安装最新的体验版本 可能包含bug,不不要⽤用于⽣生产环境 npm i -D webpack@beta

安装webpack V4+版本时，需要额外安装webpack-cli npm i -D webpack-cli

4，打开code

code .

5，检查版本npx webpack -v（检查本地）webpack -v全局安装

npx是方便启动webpack的命令，npm自带的工具

准备执行构建

webpack执行构建是先找到默认配置webpack.config.js这个配置文件

1. 建立src文件夹，且建立src/index.js

2. 执行构建npx webpack

   构建成功会出现⼀个dist目录，里面有个main.js，这个 文件是⼀个可执行的JavaScript文件，里面包含webpackBootstrap 启动函数。

​ 3.设置默认配置，创建webpack.config.js（webpack默认设置）

//webpack是基于nodeJS的
//webpack配置  就是一个对象
const path = require("path");
module.exports = {
    //必填，webpack执行构建入口
    entry: "./src/index.js",
    //出口
    output: {
        //构建的资源在哪？必须是绝对路径
        path: path.resolve(__dirname, "./dist"),
        //构建的文件资源叫啥？
        filename: "main.js",
    },
};

1chunk=1bundle

bundle打包生成的资源文件

chunk(代码块)入口 ，只有对象才有多入口

数组：webpack会自动生成另外一个入口模块，并将数组中的每一个指定的模块加载进来，并将最后一个模块的module.exports作为入口模块的module.exports导出

loader

Webpack 默认只支持.json 和 .js模块 不支持不认识其他格式的模块

plugins（插件）

clean-webpack-plugin 使用（作用是清理冗余的文件）

1，安装npm install --save-dev clean-webpack-plugin

2，引入

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

plugins: [
        new CleanWebpackPlugin()
    ],

总体代码块

//webpack是基于nodeJS的
//webpack配置  就是一个对象
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
    //上下文  项目打包的相对路径，必须是相对路径一般情况下不写
    //context:"process.cwd()",默认值为process.cwd()即项目的根目录
    //必填，webpack执行构建入口  项目入口 字符串/数组/对象
    // entry: "./src/index.js",
    // entry: ["./src/index.js", "./src/other.js"],
    entry: {
        index: "./src/index.js",
        other: "./src/other.js",
    },
    //出口
    output: {
        //构建的资源在哪？必须是绝对路径
        path: path.resolve(__dirname, "./dist"),
        //构建的文件资源叫啥？
        filename: "[name]-[hash:5].js", //占位符
        //占位符  还可连接，eg[name]-[hash:8].js
        //1，hash，可指定长度，eg，[hash:6],整个项目的hash值，，每构建一次，就会有一个新的hash值
        //2，chunkhash:根据不同入口entry进行依赖解析，构建对应的chunk，生成相应的hash
        //只要组成entry的模块没有内容改变，则对应的hash不变
        //3，name
        //4，id

    },
    //构建模式  none production生产环境，压缩版（默认） development开发环境
    mode: "development",
    //这个机制原理是作用于webpack整个打包周期的
    plugins: [
        new CleanWebpackPlugin()
    ],
    //处理不认识的模块
    module: {
        rules: [{
            //判断是否是css类型文件
            test: /\.css$/,
            //loader顺序是从前往后
            //css-loader 言简意赅  是把css模块的内容加入到js模块中即css in js方式
            //style-loader 从js中提取css的loader再html中创建style标签，把css内容放在这个style标签中
            use: ["style-loader", "css-loader"]
        }, ],
    }
};

遇到的错误

安装项目时

解决方法：npm cache clean --force然后进行再次安装