webpack——输出管理及打包单文件组件

HtmlWebpackPlugin

你会发现，当你打包结束的时候，如果index.html在根目录直接运行的话，那么图片资源这些路径就无法访问到了。解决方案是把index.html放入dist目录中，但是dist是打包编译的结果而非源码，所以把index.html放到dist中就不合适，而且你也会发现，我们打包的结果文件名：bundle.js,如果我把这个文件名改了，则index.html也要手动修改。
所以，综合以上问题，我们就可以使用一个插件HtmlWebpackPlugin来解决。

安装依赖：

npm i -D html-webpack-plugin

配置：

	//该插件的作用就是把index.html文件打包到你的bundle.js文件所属目录
    //也就是说bundle.js到哪里，index.html就到哪里
    //同时 这个插件也会自动在index.html中注入script引用连接
    //而且引用的资源名称也取决于你的bundle叫什么
    plugins:[
        new htmlWebpackPlugin({
            template:'./index.html'
        })
    ],

Vue-loader 打包单文件组件

• vue-loader
• vue-template-compiler

安装：

npm i -D vue-loader

配置：

// 参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
// Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
 const VueLoaderPlugins=require('vue-loader/lib/plugin')
 plugins: [
        new VueLoaderPlugins()
    ],
 module: {
            {
                test:/\.vue$/,
                use:[
                    'vue-loader'
                ]
            }
        ]
    }