如何使用 webpack 将文件复制到分发文件夹？

Question

在我的 index.html 中，我需要包含一个 JS 和 CSS 文件。它们必须包含在其中，并且不能被要求或导入。我怎样才能让 webpack 抓取我需要的文件并将它们放在 dist 文件夹中？

Answer 1

来自https://github.com/calitek/BasicStarterWP;
webpack.config.js

var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

const ROOT_PATH = path.resolve(__dirname);
const SRC_PATH = path.resolve(ROOT_PATH, 'ui-src', 'app.js');
const DIST_PATH = path.resolve(ROOT_PATH, 'ui-dist');

module.exports = {

  entry: SRC_PATH,

  output: {
    path: DIST_PATH,
    filename: "app.js"
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {presets:[ 'es2015', 'react', 'stage-0' ]}
      },
      {test: /\.css$/, loader: ExtractTextPlugin.extract("css-loader")},
      {test: /\.(png|jpg|ico)$/, loader: 'file-loader?name=img/[name].[ext]'},
      {test: /\.(html)$/, loader: 'file-loader?name=[name].[ext]'}
    ]
  },
  plugins: [new ExtractTextPlugin('app.css', {allChunks: true})],
  resolve: {extensions: [ '', '.js' ]}
};

package.json

  "dependencies": {
    "express": "latest",
    "react": "^0.14",
    "react-dom": "^0.14",
    "serve-favicon": "latest"
  },
  "devDependencies": {
    "babel-core": "latest",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "latest",
    "babel-preset-react": "latest",
    "babel-preset-stage-0": "latest",
    "css-loader": "latest",
    "extract-text-webpack-plugin": "latest",
    "file-loader": "latest",
    "webpack": "latest"
  }

app.js

'use strict';

require("./index.html");
require("./css/index.css");
require("./img/favicon.ico");

import React from 'react';
import ReactDom  from 'react-dom';

import AppCtrl from './components/app.ctrl';

window.ReactDom = ReactDom;

ReactDom.render( <AppCtrl />, document.getElementById('react') );