上次我们讲到了使用npm 工具来帮我本管理命令,现在我们来修改一下我们的js输出路径,之前是直接输出到了dist下面 现在我们想输出到dist/js文件夹下,
output: {
// 这里有两种写法
// path:__dirname + '/public',//打包后的文件存放的地方
path:path.resolve(__dirname,'dist'), //path.resolve为nodejs的固定语法,用于找到当前文件的绝对路径
filename:'js/bundle.js'//打包后输出文件的文件名
},
在执行npm run build 查看一下文件夹 成功打包好了
在我们用vue-cli的时候 执行npm run build的时候还会生成一个index.html,接下来我们来实现。
首先执行命令
cnpm install html-webpack-plugin --save-dev
在wenpack.config.js中引入
var htmlWebpackPlugin = require('html-webpack-plugin');
初始化插件
plugins:[
//初始化html插件
new htmlWebpackPlugin({
template:'./index.html',//指定生成html的模板
filename:'index.html',//编译好的文件名
inject:'body'//将脚本js放在哪个标签内
})
]
此时我们的wenpack.config.js是这个样子的
const path=require('path'); //nodejs的语法,引入路径模块,为了输出的时候找绝对路径
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js",//唯一入口文件__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录
output: {
// 这里有两种写法
// path:__dirname + '/public',//打包后的文件存放的地方
path:path.resolve(__dirname,'dist'), //path.resolve为nodejs的固定语法,用于找到当前文件的绝对路径
filename:'js/bundle.js'//打包后输出文件的文件名
},
devServer: {
contentBase:"./",//本地服务器所加载的页面所在的目录
historyApiFallback:true,//不跳转
hot:true,//实现热加载
port:8080,//设置端口
inline:true//试试刷新
},
mode: 'development', // 设置mode
//安装自动生成html的插件
plugins:[
//初始化html插件
new htmlWebpackPlugin({
template:'./index.html',//指定生成html的模板
filename:'index.html',//编译好的文件名
inject:'body'//将脚本js放在哪个标签内
})
]
}
!这里注意指定生成html模板这一项,假如你想生成一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="mydiv"></div>
<div>4567789</div>
</body>
</html>
这样一进来就会有一个div的,就写好一个html并挂载template中指定好路径就好了,名字可以变
这样我们在执行npm run build的时候就会生成了一个已经引用好js的一个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="mydiv"></div>
<div>4567789</div>
<script type="text/javascript" src="js/bundle.js"></script></body>
</html>
此时文件结构是这样的
是不是跟脚手架很像呢。