Question

我需要在一个文件中创建所有内容。网页即时写作将从我无法访问相对（和绝对）路径的地方提供。所以我需要在标签之间的index.html文件中放入js。

我从vue webpack模板开始，修改它，所以我只有两个文件--js和html文件。我可以使用sed等自动化它，但是有更好的方法吗？

Answer 1

您可以使用webpack插件web-webpack-plugin，script-ext-html-webpack-plugin或html-webpack-plugin

html-webpack-plugin和extract-text-webpack-plugin方式

webpack config：

示例https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/webpack.config.js

var path = require('path');
var HtmlWebpackPlugin = require('../..');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpackMajorVersion = require('webpack/package.json').version.split('.')[0];

module.exports = {
  context: __dirname,
  entry: './example.js',
  output: {
    path: path.join(__dirname, 'dist/webpack-' + webpackMajorVersion),
    publicPath: '',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-
        loader', 'css-loader') }
    ]
  },
 plugins: [
 new HtmlWebpackPlugin({
    inject: false,
    cache: false,
    filename: 'index.html',
    favicon: 'favicon.ico',
    title: 'demo'
  }),
  new ExtractTextPlugin('styles.css')
]
};

web-webpack-plugin方式

webpack config：

module.exports = {
  entry: {
    A: './a',
    B: './b',
  },
  plugins: [
    new WebPlugin({
        // file name or full path for output file, required.
        // pay attention not to duplication of name,as is will cover 
           other file
        filename: 'index.html',
        // this html's requires entry,must be an array.dependent resource will inject into html use the order entry in array.
        requires: {
            'inline': {
                _inline: true,
                _dist: true
            }
        }
    }),
  ]
};

如何使用webpack在一个文件中创建所有文件

1 个答案: