webpack简易教学（二）

根据上一篇继续往下学。

我们上一篇将到了 如何使用npm 工具来代替我们输入命令，也已经初步打包成功了。

接下来如果我们不想将js只放在dist文件夹下呢，我想放在dist/js文件下，因为我们之后会生成一个html文件。

接下来继续配置webpack.config.js

output: {
        // 这里有两种写法
        // path:__dirname + '/public',//打包后的文件存放的地方
        path:path.resolve(__dirname,'dist'),    //path.resolve为nodejs的固定语法，用于找到当前文件的绝对路径
        filename:'js/bundle.js'//打包后输出文件的文件名
    },

只需要将filename配置成这样就可以了，在命令行执行 npm run build查看一下dist文件夹，此时下面有个js文件夹，下面有个bundle.js

我们在使用vue-cli的时候打包后会在dist下生成一个index.html，这个是怎么生成的呢 我们接下来来实现

首先我们依赖html-webpack-plugin这个插件

cnpm install html-webpack-plugin --save-dev

在webpack.config.js中

var htmlWebpackPlugin = require('html-webpack-plugin');


 //安装自动生成html的插件
    plugins:[
        //初始化html插件
        new htmlWebpackPlugin({
            template:'./index.html',//指定生成html的模板
            filename:'index.html',//编译好的文件名
            inject:'body'//将脚本js放在哪个标签内
        })
    ]

最后的webpack.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放在哪个标签内
        })
    ]

}