vue webpack 自动打开页面_vue整合webpack

创建项目目录

切换到项目目录运行命令 npm init -y 初始化项目

npm init -y

在跟目录创建 src 目录，在 src 目录创建 index.html 文件和 main.js 文件

安装 webpack 所需依赖

// 在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开

cnpm i webpack -D

cnpm i webpack-cli -D

// 当我们在控制台，直接输出 webpack 命令的执行的时候 webpack 做了一下几步

// 1.首先，webpack 发现，我们并没有通过命令的形式，给他指定出口和入口

// 2.webpack 就会去 项目的根目录中，查找一个叫做“webpack.config.js”的配置文件

// 3.当找到配置文件后，webpack 回去解析执行这个配置文件 ，当解析执行完成配置文件后，就得到了，配置文件中，导出配置对象

// 4.当webpack 拿到 配置对象后，就拿到了 配置对象中指定的入口和出口，然后进行打包构建；

在项目根目录创建 webpack.confing.js 并配置以下信息

// webpack 是基于 node.js 构建的所以可以再配置文件中使用一切 node 语法

const path = require('path')

module.exports = {

// 设置打包的入口文件，表示要打包的文件

entry: path.join(__dirname, './src/main.js'),

output: {

// 指定打包输出的文件路径 ， 打包时 webpack 会帮我们自动创建 dist 目录

path: path.join(__dirname, './dist'),

// 指定输出文件的 文件名

filename: 'bundle.js'

}

}

使用 webpack 命令就可以实现打包，会自动创建 dist 目录，并在目录下生成 bundle.js

image.png

使用 webpack-dev-serve 工具 来实现自动打包编译的功能

1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖

2. 安装完毕后，这个工具的用法 和 webpack 命令的用法，完全一样

3. 由于，我们是在项目中，本地安装的 webpack-dev-server,所以无法把它当做 脚本命令，在终端运行，(只有那些安装到 全局 -

g 的工具，才能在终端运行)

4. 注意： webpack-dev-server 这个工具要想正常运行，要求 在本地项目中，必须安装 webpack

5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有 存放到实际的物理磁盘上，而是，直接托管到了电脑的内存

中，所以我们在项目的根目录找不到这个bundle.js

6. 我们可以认为，webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们的项目根目录中，虽然我们看不到，

但是，可以认为，和 dist src node_modules 平级

有一个看不见的文件叫做 bundle.js

配置 webpack-dev-server

1.配置 dev-sever 第一种方式,在 package.json 文件的 scripts dev 节点配置

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"dev": "webpack-dev-server --open --port 8000 --contentBase src --hot"

},

--open 启动自动打开浏览器 --port 8000 指定启动端口 --contentBase src 指定默认加载的目录 --hot

-- host 指定ip 访问

热更新 不会重新生成 bundle.js 只会加载更新的部分

2.配置 dev-sever 第二种方式 相对来说这个方式更麻烦一些 不推荐

在 webpack.config.js output同级添加 devServer 节点

devServer:{

open: true, // 自动打开浏览器

port: 3000, // 设置启动时候的运行端口

contentBase: 'src', /