如何在新生成的html文件中更改捆绑文件的路径

时间:2018-04-06 08:59:54

标签: javascript typescript webpack gulp html-webpack-plugin

请参阅use-gulp-to-select-and-move-directories-and-their-files ,我将html文件从dist文件夹更改为root文件,但我不知道如何更改html文件中的捆绑文件路径

我使用了folulwing gulp任务来移动我的html文件

var filesToMove = [
    'dist/index.html',
];

gulp.task('move', function(){

gulp.src(filesToMove, { base: './' })
  .pipe(gulp.dest('./'));
});

这是我想要更改捆绑文件路径的位置

<link rel="shortcut icon" href="favicon.ico"><link href="app.e6b85da4b9b36d023c5e.css" rel="stylesheet"></head>

还有一个地方

<script type="text/javascript" src="polyfills.e6b85da4b9b36d023c5e.js"></script><script type="text/javascript" src="app.e6b85da4b9b36d023c5e.js"></script><script type="text/javascript" src="ts-file.e6b85da4b9b36d023c5e.js"></script></body>

**这是我的webpack文件。我给了我的dist文件文件kocation **

&#13;
&#13;
const webpack = require('webpack')
const webpackMerge = require('webpack-merge')
const CompressionPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
const { AotPlugin } = require('@ngtools/webpack')
const commonConfig = require('./webpack.common.js')
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const helpers = require('./helpers')

const ENV = process.env.NODE_ENV = process.env.ENV = 'production'

module.exports = webpackMerge(commonConfig(), {

  output: {
    path: helpers.root('dist'),
    filename: '[name].[hash].js',
    chunkFilename: '[id].[hash].chunk.js'
  },

  plugins: [
    new AotPlugin({
      tsConfigPath: helpers.root('tsconfig-aot.json'),
      entryModule: helpers.root('src', 'app', 'app.module#AppModule')
    }),
    new LoaderOptionsPlugin({
      minimize: true,
      debug: false,
      options: {
        htmlLoader: {
          minimize: false
        }
      }
    }),
    new UglifyJsPlugin({
      beautify: false,
      output: {
        comments: false
      },
      mangle: {
        screw_ie8: true
      },
      compress: {
        screw_ie8: true,
        warnings: false,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        if_return: true,
        join_vars: true,
        negate_iife: false
      },
    }),
    // new CompressionPlugin({
    //   asset: '[path].gz[query]',
    //   algorithm: 'gzip',
    //   test: /\.js$|\.css$|\.html$/,
    //   threshold: 10240,
    //   minRatio: 0.8
    // }),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    })
  ]

})
&#13;
&#13;
&#13;

这是我常见的网络包文件

&#13;
&#13;
const webpack = require('webpack')
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const helpers = require('./helpers')

module.exports = () => {

  const isProd = process.env.ENV === 'production'

  return {

    // Array of extensions that will be used to resolve modules
    resolve: {
      extensions: ['.ts', '.js', '.json'],
      modules: [
        helpers.root('src'),
        helpers.root('node_modules')
      ],
    },

    // The entry point for the bundle
    entry: {
      'polyfills': helpers.root('src', 'polyfills.ts'),
      'ts-file':[
        helpers.root('src','app','common','samplelist.ts'),
        helpers.root('src','app','common','shared.module.ts'),
        helpers.root('src','app','app.module.ts')
             ],
      'app': [
        helpers.root('src', isProd ? 'main-aot.ts' : 'main-jit.ts'),
        helpers.root('src', 'assets', 'styles', 'main.scss')
      ]
    },

    module: {
      rules: [
        // Compiles all .ts files
        {
          test: /\.ts$/,
          use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'],
          exclude: /\.spec\.ts$/
        },
        // Injects all html templates into their components and loads referenced assets
        {
          test: /\.html$/,
          use: 'html-loader',
          exclude: helpers.root('src', 'index.html')
        },
        // Copies all images and fonts into dist/assets
        {
          test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/,
          use: 'file-loader?name=assets/[name].[ext]'
        },
        // Puts all styles from assets/styles/main.scss in a separate file
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
          exclude: helpers.root('src', 'app')
        },
        // Injects all angular styles into their components
        {
          test: /\.scss$/,
          use: ['raw-loader', 'sass-loader'],
          include: helpers.root('src', 'app')
        },
        // To string and css loader support for *.css files (from Angular components)
        {
          test: /\.css$/,
          use: ['to-string-loader', 'css-loader'],
          include: helpers.root('node_modules')
        },
        // Loads all "required" json files into their components
        {
          test: /\.json$/,
          use: 'json-loader'
        }
      ]
    },

    plugins: [
      // File name for the extracted styles
      new ExtractTextPlugin(`[name]${isProd ? '.[hash]' : ''}.css`),
      // Identifies common modules and puts them into a commons chunk
      new webpack.optimize.CommonsChunkPlugin({
        name: ['app', 'polyfills']
      }),
      // Provides context to Angular's use of System.import
      // See: https://github.com/AngularClass/angular2-webpack-starter/issues/993#issuecomment-283423040
      new ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)@angular/,
        helpers.root('src')
      ),
      // Generates a HTML5 file that includes all webpack bundles
      new HtmlWebpackPlugin({
        template: helpers.root('src', 'index.html'),
        favicon: helpers.root('src', 'favicon.ico')
      }),
      // Copies all i18n files into dist/i18n
      // new CopyWebpackPlugin([{
      //   from: helpers.root('src', 'i18n'),
      //   to: 'i18n'
      // }]),
        
  ],
    performance: {
      hints: false
    }

  }

}
&#13;
&#13;
&#13;

0 个答案:

没有答案