小试牛刀
安装包
npm i webpack webpack-cli -g
-
切换到本地目录 新建一个entry.js
webpack entry.js -o bundle.js --mode=development4-o 代表打包输出文件
-mode 选择版本模式
webpack4.x的打包 已经不能用webpack 文件a 文件b的方式 创建index.html 导入bundle.js
-
demo.css引入到entry.js.
require('demo.css') -
生成package.json
npm init -y npm i style-loader css-loader -d -
配置webpack.config.js 再次运行命令
webpack entry.js -o bundle.js --mode=developmentimage.png
渐入佳境
webpack+vue实现脚手架
1.创建根目录
|--src 项目的源代码目录
|--main.js 项目的入口文件
|--App.vue 根组件
|--package.json 项目配置文件
npm init -y
|--webpack.config.dev.js 项目开发阶段的配置文件
- App.vue (引组件 一定要加后缀)
image.png
- main.js
image.png
2.创建一个配置项webpack.config.dev.js
image.png
image.png
npm install vue vue-loader
- webpack-dev-server + html-webpack-plugin 实现热更新
webpack-dev-server 打包生成bundle.js html-webpack-plugin 帮我们生成index.html并且自动导入bundle.js npm i webpack webpack-dev-server webpack-cli html-webpack-plugin -D
4.创建一个参照template.html 并且配置
<div id="app"></div>
image.png
5.package.json里面配置webpack-dev-server
image.png
6.webpack.config.dev.js的配置
image.png
