webpack如何将首页打包到根目录而不是打包到build?

问题描述

问 题

现在我的文件全部都是打包到build中，但是index.html应该是单独打包到根目录而不是build中，请问这个问题如何解决

配置文件：
var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var TEM_PATH = path.resolve(ROOT_PATH,'templates');
module.exports = {

 entry : {
     main : APP_PATH + '/js/main.js',
     vendors : ['jquery','moment']
 },
 devtool: 'eval-source-map',
 output : {
     path : BUILD_PATH,
     filename : '[name].js'
 },
devServer: {
        
    hot: true,
    inline: true,
    progress: true,
    port : 7777,
     proxy :{
        '/itemCategory/*':{
            target : 'http://localhost:8082',
            secure : false
        }
    } 
},
module :{
    loaders:[
        {
            test: /\.css$/,
            loaders: ['style', 'css'],
            include : APP_PATH
        },
        {
            test: /\.(png|jpg)$/,
            loader: 'url?limit=4000000'
          }
    ]
},
plugins : [
    new HtmlwebpackPlugin({
         title : '澳門記憶',
         template : path.resolve(TEM_PATH,'index.html'),
         chunks : ['main','vendors'],//这个插件告诉插件需要引入哪几个入口文件
         inject: 'head',//插入到body
         hash: true
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),//全局js
    new webpack.optimize.UglifyJsPlugin({minimize: true}),//代码压缩
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')//将入口文件的vendors打包成vendors.js
]

}

这是我希望打包后index.html出现的位置

解决方案

html-webpack-plugin也没有能重置输出路径的参数呢，看来是只能把output.path参数设为你现在的根目录，然后在所有其它资源的路径上加上build/这一级目录呗。

其实我认为根本不需要做什么改动，index.html放在build目录里是最好不过的，你只要部署的时候把build目录作为网站根目录就完事了。

这篇关于webpack如何将首页打包到根目录而不是打包到build?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！