webpack4.x的使用

小试牛刀

安装包
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=development  
  

  image.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

3. 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