Vue笔记-WebPack

扩展

//npm
npm 安装依赖包时指定参数：参考 [npmjs.com](http://www.npmjs.com) 

一、WebPack前端工程化解决方案

1. 导入JQuery

# 安装JQuery
npm i jquery -S
# -S(--save):当依赖包安装完成后将 "包名":"版本号" 信息添加到package.json文件的dependencies节点下 (默认会添加这个参数)
# dependencies节点是开发测试部署都需要的包

# 使用ES6导入JQuery
import $ from 'jquery';

# 定义JQ入口函数
$(function(){
	# 函数内容
})

2. WebPack安装

# 安装WebPack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
# -D(--save-dev):当依赖包安装完成后将 "包名":"版本号" 信息添加到package.json文件的devdependencies节点下
# devdependencies节点是只在开发时需要的包

3. WebPack配置

根目录下的 webpack.config.js

//使用Node.js的导出语法，导出一个webpack配置对象
module.exports = {
    //配置webpack的运行模式，可选值有 development 和 production
    //development:开发模式，打包时间短；生成体积大、不压缩的JS
    //production:生产模式，打包时间长；生成体积小、压缩后的JS
    mode:'development'
}

package.json 的 scripts 节点下 新增 dev 脚本

  "scripts": {
  	//删掉默认的test
    "dev": "webpack" //可以通过npm run执行 例如 npm run dev
  }

3.1 指定打包入口文件和出口文件

const path = require('path')//导入Node.js中专门操作路径的模块

//使用Node.js的导出语法，导出一个webpack配置对象
module.exports = {
    //配置webpack的运行模式，可选值有 development 和 production
    mode:'development',
    entry: path.join(__dirname,'./src/index.js'), //打包入口文件路径
    output: {
        path: path.join(__dirname,'./dist'), //输出文件的路径
        filename:'result.js' //输出文件的名字
    }
}

4. WebPack运行

WebPack的默认约定
在WebPack 4.x 和 5.x 中，有如下默认约定：

1. 默认的打包入口文件为 src/index.js
2. 默认的打包输出文件路径为 dist/main.js

---

可以在 webpack.config.js 中修改约定
通过entry节点指定打包的入口，通过output节点指定打包的出口

PS：run运行的时候 会先读取 webpack.config.js 脚本中的配置再运行

# 以webpack的方式运行项目
npm run dev

5. 更换JS引入

webpack 将所有 JS 打包成兼容性强的 /dist/main.js

在 .html 中引入生成后的 main.js

<!-- <script src="./index.js"></script> -->
<script src="../dist/main.js"></script>

6. Webpack中的插件

6.1 webpack-dev-server

作用：源代码有变化时，自动重新打包构建项目

1.安装

# 安装 webpack-dev-server
npm i webpack-dev-server@3.11.2 -D

2.配置

修改package.json 中 scripts 标签 添加 serve

  "scripts": {
    "dev": "webpack serve"
  },

6.2 html-webpack-plugin

作用：