一、介绍：

　　1. js应用的模块打包工具

二、webpack安装

　　1. 环境：node环境

　　2.  npm install webpack -g 

　　　　说明：npm install 命令；webpack是工具名，可以指定版本如：webpack@3.6.0； -g表示全局安装，如果不想全局安装，仅为某项目安装开发时依赖，可以在进入该项目目录下执行安装命令， 将-g改为--save-dev

　　　　整体案例：npm install webpack@3.6.0 --save-dev

　　3.  webpack --version 

　　　　说明：查看webpack安装版本，正确显示说明安装成功。注意：高版本webpack查看版本时会让安装webpack脚手架（webpack-cli）

　　4.  npm uninstall webpack -g 

　　　　说明：移除webpack工具

三、webpack打包

　　1. webpack 入口js文件 打包后的js文件名

　　　　说明：webpack是打包命令；入口文件是项目的入口，如main.js；打包后的文件名是打包成功后输出生成的文件名，如bundle.js

　　　　整体案例：webpack ./src/main.js ./dist/bundle.js

　　2. webpack

　　　　说明：在webpack进行文件配置之后，可以直接使用webpack打包，webpack会从配置中查找入口文件和出口文件进行打包；文件名称：webpack.config.js

　　　　　　配置方式：

module.exports = {
    // 入口
    entry: './src/main.js',
    // 出口
    output: {
        // path必须为绝对路径
        path: absolutePath,
        filename: 'bundle.js'　　　　　　　　
    }
} 

　　　　　　绝对路径相对化：在项目目录下执行npm init命令会生成package.json文件，此时在webpack.config.js配置文件中导入path模块，此时就会从package.json或者全局中查找path包，使用包中的resolve函数拼接出path

　　　　　　导入模块： const path = require('path') 

　　　　　　拼接绝对路径： path.resolve(__dirname, 'dist') 

　　　　　　　　其中 __ditname是node中获取的当前项目的文件夹绝对路径

　　3.  npm run *** 

　　　　说明：npm run 命令可以用来执行脚本命令，在配置好映射之后便可以使用

　　　　　　建立webpack打包映射：在package.json文件中的scripts中添加命令映射：如 "build":"webpack"

　　　　　　在建立好上述映射之后，就可以使用npm run build进行打包构建，执行的就是webpack命令，使用的是配置信息

　　　　此种打包方式会优先使用本地安装的webpack

四、webpack扩充

　　1. loader安装

　　　　通过npm安装需要使用的loader；

　　2. loader配置

　　　　在webpack.confi.js中的module关键字下进行配置（去官网查找相关loader和用法。webpack.js.org）

　　3. 整体案例：一：  npm install css-loader --save-dev; npm install style-loader --save-dev; 

　　　　　　　　二：

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        }]
    }　　
}

 

日期：2021-10-20