通过一个小小小的项目来走一遍webpack最最基础的流程吧!
项目目录
root
|__dist
| |__bundle.js
|__src
| |__images
| |__css
| |__js
| |__main.js
| |__index.html
|__webpack.config.js
|__package.json
基本配置打包
-
在项目根文件夹下打开cmd终端
打开方式:如何使用vscode的终端(保姆级)
-
npm init -y
根目录下执行,初始化项目,生成 package.json文件 -
根据项目目录创建文件夹: src 用来存放源码;dist 用来存放要发布的文件(空)
index.html结构<ul> <li>这是第1个li</li> <li>这是第2个li</li> <li>这是第3个li</li> <li>这是第4个li</li> <li>这是第5个li</li> </ul>
main.js
import $ from 'jquery' $(function() { $('li:even').css('backgroundColor', 'burlywood') $('li:odd').css('backgroundColor', 'cornflowerblue') })
-
npm install jquery
先把js里要用到的模块下载好 -
npm install webpack webpack-cli -g
全局安装为开发依赖 webpack,webpack4.0以上要手动安装 webpack-cli -
根目录下需要新建 webpack.config.js 文件 ,如下配置 入口 和 出口
const path = require("path") // 使用node'语法向外暴露对象,因为webpack底层就是用nodejs开发的 module.exports = { // 入口文件:指定要处理的JS文件 entry: path.join(__dirname, './src/main.js'), // 指定输出选项 output: { path: path.join(__dirname, './dist'), filename: 'bundle.js' } }
-
webpack --mode development
打包。发布成功
-
index.html中引入编译后的 bundle.js文件,就可以在浏览器端打开啦。但是每次修改都需要打包发布流程,不如来热更新。
<script src="/bundle.js"></script>
热更新
- 类似于nodemon功能,实时监听项目改变,自动编译
npm install webpack-dev-server -D
把webpack-dev-server安装为项目依赖- 在package.json的 scripts字段中增加
// scripts字段里的都是脚本,添加了之后可以通过 'npm run 脚本名称' 来运行 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" }, // 其中 --open 表示打开默认浏览器, // --port 表示端口号, // --contenBase 表示进入哪个目录, // --hot 表示热更新,这是热更新的第一步
npm install html-webpack-plugin -D
安装 html-webpack-plugin- 在webpack.config.js中写入
// 导入在内存中生成HTML页面的插件 // 只要是插件 都一定要放到plugin节点中去 /* 这个插件的两个作用: 1. 自动在内存中根据指定页面生成一个内存的页面 2. 自动把打包好的 bundle.js 追加到页面中去 */ const htmlWebpackPlugin = require("html-webpack-plugin") // 在 module.exports 中增加 plugins: [ new htmlWebpackPlugin({ // 创建一个在内存中生成HTML页面的插件 // 这里指定模板页面,将来会根据指定的页面路径去生成内存中的页面 template: path.join(__dirname, "./src/index.html"), filename: "index.html" }) ]
npm run dev
发现报错,好吧webpack-dev-server需要webpack的本地依赖
[Error: Cannot find module ‘webpack’]npm install webpack webpack-cli -D
把这两个工具安装为开发依赖,安装完后package.json文件显示依赖如下
(这里有个坑,webpack-cli的默认新版本对webpack-dev-server版本的不兼容。这步可以直接看后面的报错内容)
Error: Cannot find module ‘webpack-cli/bin/config-yargs’
-
重新安装webpack和webpack-cli为项目依赖之后,执行
npm run dev
报了这个错。按理这里应该出现我打包完成并且启动服务的。找了半天原因!其实是版本不兼容!恼人!
webpack-cli的新版本对webpack-dev-server版本的不兼容
,上上图的"devDependencies"可以看到,默认安装的版本是 “^4.7.0”。手动降低webpack-cli的版本为 “^3.3.12” -
npm uninstall webpack-cli
先卸载当前的webpack-cli -
npm i webpack-cli@3.3.12 -D
就ok了
-
放心大胆地
npm run dev
吧!