如何使用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'));