webpack编译文件

webpack 准备工作

1.初始化项目

//webpack 是前端模块化打包（构建）工具。
//webpack除了打包应用，也可以用来打包js库
npm init 

2.安装cli工具 webpack 库

npm i --save-dev webpack webpack-cli

3.测试运行webpack

//局部安装
npx webpack --version
//全局安装
webpack --version
//推荐局部安装，因为有版本的不一样，全局会把局部的覆盖

webpack 使用

搭建webpack

搭建webpack,npx webpack命令运行好之后的

package.json

{
  "name": "zhuzhu",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.46.0",
    "webpack-cli": "^4.7.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js 如何配置

// 运行webpack命令的时候
// 命令 会自动帮我们运行webpack.config.js
// 总结：所以的命令都有配置文件 命令执行的时候 先配置文件 然后根据配置文件的具体配置 参数完成任务
console.log('我是猪猪');
// __dirname当前运行文件所在的根目录路径 绝对路径
// path作用 处理文件路径 不负责查找文件
const path = require('path')
console.log(__dirname);

// 将相对路径变为绝对路径 ，可以接受n个参数
// console.log(path.resolve('./a.js','./b.js','./b.js'));

module.exports = {
    mode: 'development', //mode 模式 development  production  none
    entry: './src/index.js', //配置入口文件
    output: { //配置出口文件
        path: path.resolve(__dirname, 'dist'), //打包后输出的文件夹
        filename: 'bundle.js' //打包后的文件名字
    }

}