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

How can I use webpack to copy files to the distribution folder?

本文关键字：文件夹 复制 文件 何使用 webpack      更新时间：2023-09-26

在我的index.html中，我需要包含一个JS和CSS文件。它们必须包含在其中，不能被要求或导入。我如何简单地让webpack获取我需要的文件并将它们放在dist文件夹中？

来源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') );

相关文章：