一、webpack 基础环境搭建
1.初始化构建环境
执行 npm init -y
2.安装webpack环境依赖
推荐在本地环境中安装依赖模块，这样在项目在cnpm install时，会自动加载webpack环境，而不是换电脑时重新全局安装webpack环境
webpack环境依赖：cnpm install webpack webpack-cli -D
3.安装对css文件处理的依赖（loader）
安装css 处理依赖：cnpm install css-loader style-loader -D
- css-loader：把css模块的内容 加入到 js模块中去，css in js方式
- style-loader： 从js中提取css，在html的head标签下创建style标签 把 css的内容放在这个style标签中
4.安装清除旧的构建包的依赖（插件）
安装清除旧构建包的依赖：cnpm install clean-webpack-plugin -D
入口文件内容改变时，执行npx webpack 会生成新的打包文件，此模块作用是清除旧的构建包
5.新建入口文件
稍后会在webpack配置文件中通过entry中指定到这个路径，这样、项目启动后会进入并执行这个js文件
在根目录下新建 src/index.js
6.新建webpack配置文件webpack.config.js并配置（不创建走默认）
webpack.config.js就是导出一个对象，且语法是基于nodeJS的，遵守common.js规范
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");
module.exports = {
context: process.cwd(), //上下文配置，默认process.cwd()
entry: "./src/index.js", // 入口文件指定、类型可对象，常用多入口文件设置
//构建后的出口配置
output: {
path: path.resolve(__dirname, "./dist"), // 构建的文件资源存放的路径，没有会自动创建、必须是绝对路径
filename: "[name]-[hash:6].js", // 构建的主文件，推荐使用占位符，常用于hash缓存设置和多入口文件设置
},
mode: "development", //构建模式：none、production（生产）、development（开发）
plugins: [new CleanWebpackPlugin()], //插件 ，非loader的处理
//loader处理：webpack只认识.js .json文件，其他文件需要在此处做处理
module: {
rules: [
{
test: /\.css$/, // 正则检测本地的.css后缀文件
use: ["style-loader", "css-loader"], // loader 执行是异步的，顺序是从后往前
},
],
},
};
// 执行命令 npx webpack，如果存在 webpack.config.js 文件则会加载它
注意： webpack启动命令 npx webpack
二、文件处理（loader）的使用
- 安装依赖：cnpm install css-loader style-loader -D
- loader 安装后，无需引入直接在webpack的配置文件中的module中的rules数组中使用，
- loader的执行是异步的（等后一个执行完才执行前一个），执行顺序是从后往前
//loader处理：webpack只认识.js .json文件，其他文件需要在此处做处理
module: {
rules: [
{
test: /\.css$/, // 正则检测本地的.css后缀文件
use: [{loader: "style-loader",options: {} }, {loader: "css-loader"}],
// loader 执行是异步的，顺序是从后往前，options中放置参数
},
],
},
三、插件（plugin）的使用
- 安装依赖：cnpm install clean-webpack-plugin -D
- plugin安装后，先require引入、然后在 plugins数组中 中实例化
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
plugins: [new CleanWebpackPlugin()], // 插件 ，非loader的处理