- 学习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-serveryarn add webpack-dev-server -Dstep2: 打开webpack.config.js文件，配置webServerdevServer: { 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/