webpack教学（二）

上次我们讲到了使用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

扫描二维码关注公众号，回复： 5413066 查看本文章

<!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>

此时文件结构是这样的

是不是跟脚手架很像呢。

猜你喜欢