共计 1586 个字符，预计需要花费 4 分钟才能阅读完成。
– 学习 webpack4.x – 基础配置 //- 学习 webpack4.x – HTML 处理（未整理）// 学习 webpack4.x – 样式处理（未整理）// 学习 webpack4.x – ES6 语法转化（未整理）// 学习 webpack4.x – 全局变量引入（未整理）// 学习 webpack4.x – 图片处理（未整理）
=======================================================
基础配置
安装
yarn init -y 初始化项目
yarn add webpack webpack-cli -D
尝试运行
step1: 新建 src 目录，在 src 目录下新增一个 index.js 文件，并输入：console.log(‘ 丸子 ’);step2: 打开 package.json 文件，添加一个脚本：
“scripts”: {
“build”: “webpack”
}
尝试运行一次：
npm run build
打包成功了！当前目录结构为：
当前目录中并没有 webpack.config.js 这个文件却还能打包成功？因为在 webpack4 中不必一定要有配置文件了，也不必一定要指定一个入口和出口才能打包成功。它会默认找到./src/index.js 作为默认入口点并且在 ./dist/main.js 中输出模块包，但是这样不是很灵活，因为名字之类的都指定了，那么怎么自己配置这些东西呢？
入口 & 出口配置
step1: 根目录下新建一个 webpack.config.js 文件 step2: 打开 webpack.config.js 文件，进行入口和出口配置：
let path = require(‘path’);
module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘bundle.js’,
path: path.resovle(__dirname, ‘dist’)
}
}
尝试运行一下：npm run build
运行成功了。
当前目录结构为：
两个配置：
entry: 入口配置 用来指定入口起点，默认./src，进入入口起点后，webpack 会找出有哪些模块和库是入口起点直接和间接依赖的。
output: 出口配置 用来指定在哪里输出所创建的 bundles，默认./dist，其中：
filename: 输出文件名称
path: 输出文件存放路径，该路径是绝对路径
上面结果中还看到有一个 warning 说 mode 没有设置，这个 mode 是模式，接下来配置下这个 mode
模式配置
mode（模式）：分别是 production(生产) 和 development(开发) 模式
方法一：打开 webpack.config.js 文件，配置 mode
方法二：打开 package.json 文件，配置脚本
尝试运行，
npm run dev // 开发环境
npm run build // 生产环境
警告消失，结果如下：
（补充）启动本地服务
在本地开发的时候，总是要自己在浏览器中打开文件，这样很不好，那么怎么在本地开一个服务呢？step1: 安装 webpack-dev-server
yarn add webpack-dev-server -D
step2: 打开 webpack.config.js 文件，配置 webServer
devServer: {
port: 3000, // 端口号
progress: true, // 进度条
contentBase: ‘./dist’, // 指定目录运行服务
open: true // 自动打开浏览器
}
step3: 打开 package.json 文件，更改下脚本
“scripts”: {
“dev”: “webpack –mode development && webpack-dev-server”,
“build”: “webpack –mode production”
}
尝试运行：
npm run dev
成功！结果如下：
此时浏览器会自动打开 http://localhost:3000/
