webpack打包项目（vue）二

二、webpack的4.x版本中默认的约定

打包的入口文件为src -> index.js

打包的输出文件为dist -> main.js

如果要修改打包的入口与出口，可以在webpack.config.js中新增如下的配置信息

const path = require('path') // 导入node.js中专门操作路径的模块
module.exports = {
	entry: path.join(_dirname, './src/index.js'), // 打包入口文件的路径  dirname当前文件所在目录
	output: {
		path: path.join(_dirname, './dist'), // 输出路径
		filename: 'bundle.js'  // 输出文件名称
	}
}

三、配置webpack的自动打包功能

1、运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具。

2、修改package.json --> script 中的dev命令如下：

// An highlighted block
"script":{
	"dev": "webpack-dev-server"
}

3、将src --> index.html 中，script脚本路径，修改为"/buldle.js"

4、运行npm run dev命令，重新进行打包

5、访问http://localhost:8080 地址，查看打包效果

注意

1、webpack-dev-server 会启动一个实时打包的http服务器

2、webpack-dev-server 打包生成的输出文件，默认放到了项目跟目录中，而是虚拟的，看不见的。

四、配置 html-webpack-plugin 生成预览页面

1、运行npm install html-webpack-plugin -D命令

2、修改webpack.config.js 文件头部区域，添加如下配置信息，

// 导入生成预览页面的插件，得到一个构造函数
const HTmlWbpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HTmlWbpackPlugin ({ // 创建实例对象
	template: './src/index.html', // 指定要用到的模块文件
	filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

3、修改webpack.config.js 文件中想外暴露的配置对象，新增如下配置节点

module.exports = {
	plugins: [htmlPlugin] // plugins数组是webpack打包期间会用到的一些插件列表
}

五、配置自动打包相关的参数

"script": {
	"dev": "webpack-dev-server --open _host 127.0.0.1" // 自动打开的浏览器
	// --port 8888
}