一.创建并使用默认配置文件

在项目根目录下创建一个名为webpack.config.js。其内容如下：

module.exports = {
mode: 'development', // 打包方式
}

这个文件的意义是导出一个配置项：用来对webpack的打包行为做设置

二.在配置文件中,设置入口和出口

1.定义:

1.1入口文件： 指定了webpack从哪个文件开始工作。在它的内部会引入其他的模块，这样在打包时就会「顺藤摸瓜」也将其他的文件打包进来。

1.2出口文件：指定了最后打包之后的文件，重点是这个文件的具体位置。

2.语法:

2.1在webpack.config.js中设置入口文件配置项

  module.exports = {
   mode: 'development', // 打包方式
   entry:'./src/js/main.js' // 入口文件
 }
 

2.2在webpack.config.js中设置出口文件配置项

 // 引入nodejs中的核心模块
const path = require('path') 
console.log(path.join(__dirname,'/build'))
module.exports = {
    mode: "production",
    entry: './src/js/main.js', // 入口文件
    output: {
        "path": path.join(__dirname,'/build'), // 决定出口文件在哪里
        "filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
    }
}

注意点:

• output中的filename用来指定打包后的文件名字。
• output中的path用来指定打包后的路径。注意：它必须是绝对路径。所以，这里引用path模块中的join和__dirname来生成绝对路径。
• 如果path中的路径不存在，它会自动创建。

三.关于webpack的打包模式(同样在webpack.config.js中设置)

 module.exports = {
   mode:"development"
 }

●  development :开发模式(代码不会压缩 混淆)
●  production:生产模式（压缩，混淆，加密....... 不可读）

四.webpack实时打包

1.目标 :实现实时打包预览效果。当我们修改了代码时，立即运行打包命令，并显示效果。

步骤:

1.安装: npm i webpack-dev-server -D(输入指令下包)

2.修改配置项

在webpack.config.js中修改配置项

module.exports = {
// 其他省略....

// 配置 webpack-dev-server的选项
devServer: {
    host: '127.0.0.1',  // 配置启动ip地址
    port: 10088,  // 配置端口
    open: true  // 配置是否自动打开浏览器
}
}

3.在package.json中补充一个script

"scripts": {
 "dev": "webpack-dev-server",  
 // 它默认会找webpack.config.js文件

 "build": "webpack-dev-server --config  webpack.config.js" 
  // 指定使用webpack.config.js配置文件文件
 },
 

4.输入指令现在通过 npm run dev就可以实现 实时打包、实时编译、实时浏览器查看效果了。它会自动打开一个浏览器窗口