webpack打包怎么移除html页面原来引入的css和js

Question

为什么我的项目打包成功以后链接的css和js不仅有新的，还包含旧的？

我想 本地看本地的，打包后看到的是打包后的，不想把原有的css和打包后的css都在页面中看到，因为打包后的页面根本找不到原有的css和js会报404错误。

奇了怪了

难道没有人遇到这样的问题？

难道所有人打包后 自己的页面的css和js自动都被移除了？

那移除用的什么方法？

webpack有那个方法或者配置是说明这个问题的？

我的配置文件
`/**

 * 引入打包所需脚本

 */

varpath=require('path');

// 读取文件

varfs=require("fs");

// 根目录查找html

varpathName="./";

// 存放所有html名称的集合

varhtmlFiles= [];

// 匹配html文件

varipReg= /\.(htm|html)$/i;

// 找到根目录的所有html 除index之外 存在htmlFiles中

fs.readdirSync(pathName).forEach(files=>{

if(ipReg.test(files) &&files.indexOf('index') <0){

htmlFiles.push(files);

  }

});

// 将所有页面合并到plugins

functionhtml_plugins() {

varr= []

for (vari=0;i<htmlFiles.length;i++){

varconf={

chunks:'js/css',

filename:htmlFiles[i],

template:htmlFiles[i],

minify:false

      };

r.push(newHtmlWebpackPlugin(conf));

    }

returnr

}

// 打包html的插件

varHtmlWebpackPlugin=require('html-webpack-plugin');

// 用于在构建前清除dist目录中的内容

var { CleanWebpackPlugin } =require('clean-webpack-plugin');

// 单独打包样式

varExtractTextPlugin=require('extract-text-webpack-plugin');

// 压缩css文件

varOptimizeCssplugin=require('optimize-css-assets-webpack-plugin');

/**

 * 打包配置项

 */

module.exports= {

entry: {

'js/css':'./js/index.js',

'js/bundle': [

'./js/flash.js',

'./js/Marquee.js'

        ]

    },

output: {

// 这个[name]的意思是,配置入口entry键值对里的key值,app/dist/js/index,最后的index，

filename:'[name].js',

//__dirname 当前webpack.config.js的路径

path:path.resolve(__dirname, './dist'),

    },

mode:'production', // 设置mode

module: {

rules: [

// 样式单独打包

            {

test: /\.css/,

//ExtractTextPlugin插件的作用是为了不让css被打包到了js文件中，不然浏览器打开index.html，就会发现css以style的形式被插到了head

loader:ExtractTextPlugin.extract({

fallback:"style-loader",

use:"css-loader"

                })

            },

            {

// 图片

test: /\.(png|jpg|gif|svg|webm)$/i,

loader:'file-loader',

options: {

// 保持图片名不变，而且也能够添加到指定目录下

name:'images/[name][hash:8].[ext]',

publicPath:'./',

esModule:false

// outputPath: './',

                }

            },

            {

loader:'image-webpack-loader',// 压缩图片

options: {

bypassOnDebug:true,

              }

            },

            {

// 页面

test: /\.(htm|html)$/i,

loader:'html-withimg-loader'

            }

        ]

    },

// 插件

plugins: [

// 打包成单独css

newExtractTextPlugin({

filename:'css/bundle.css',

        }),

// 压缩 css 文件

newOptimizeCssplugin(),

// 清除dist构建目录文件

newCleanWebpackPlugin(),

// html页面,可多个

newHtmlWebpackPlugin({

// 生成html文件的favicon的路径

// favicon: './favicon.ico',

filename:'index.html',

template:'index.html',

minify:false

        })

    ].concat(html_plugins())

}`

Answer 1

1. 不同环境下用不同的template，根据环境变量动态设置HtmlWebpackPlugin的template选项
2. 或者环境变量写进HtmlWebpackPlugin的options中，在index.html判断环境，

<% if ( htmlWebpackPlugin.options.env === 'development') { %>                     
       <!-- development -->                                                       
        <script  src=""></script>
<% } else { %>
       <!-- production -->
       <script  src=""></script>
<% ? %>