webpack4.x项目的搭建
项目搭建步骤：
- 创建文件夹：
mkdir webpack-base
- 进入文件夹：
cd webpack-base
- 初始化默认的package.json文件：
npm init -y
- 在项目根目录安装webpack：
npm install –D webpack
- 安装webpack-cli：
npm install –D webpack-cli
- webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli（注意：在安装webpack和webpack-cli的时候，两这需同时全局或者局部安装，否则会一直报错： Error: Cannot find module ‘webpack-cli’）
cnpm i webpack webpack-cli -g 同时全局安装cnpm i webpack webpack-cli -D 同时在项目目录安装
- 在项目根目录创建一个src目录
- 里面创建一个src/index.html文件
- 里面创建一个src/index.js文件
- 在项目根目录创建webpack.config.js配置文件
- webpack4.x 默认从项目根目录下的 ./src/index.js 中加载入口模块(特性：约定大于配置)
- 设置webpack.config.js的mode模块，两种模式
module.exports = {
mode: 'development' // development 开发模式 production 生产模式
}
- 最后执行
webpack进行打包，生成 dist/main.js目录，将main.js引入index.html中即可。
- ps: webpack4.x提供了约定大于配置的概念，目的是为了尽量减少配置文件的提交。
- 默认约定了：
- 打包的入口是：src => index.js
- 打包的输出文件是：dist => main.js
- 实时刷新：
- webpack-dev-server配置：
npm install webpack-dev-server -g
- 项目局部安装：
npm install webpack-dev-server -D
- 在package.json文件中的”scripts”中加入：
"dev": "webpack-dev-server --open --port 3000 --hot"
- 运行
npm run dev
- 如果出现以下错误：Cannot find module ‘source-map-resolve’
- 则执行：
cnpm install -g source-map-resolve和cnpm install -D source-map-resolve
- 如果继续出现下面错误：Error: Cannot find module ‘extglob’
- 则安装：
cnpm install -D extglob
- 如果浏览器并没有刷新是因为：webpack-dev-server 构建的 main.js 其实是在 http://localhost:8080/main.js 的位置
- 所以直接在index.html中引入:
<script src="/main.js"></script>
- 将index.html也放到内存中，减少磁盘的损耗:
cnpm i html-webpack-plugin -D
- 在 webpack.config.js中引入并 配置导出
- 该操作 直接将index.html放到了内存中，并自动引入了自动打包生成的main.js文件
