Question

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

Answer 1

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

＆＃13;

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' ]}
};

＆＃13;

＆＃13; 的package.json

＆＃13;

  "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"
  }

＆＃13;

＆＃13; app.js

＆＃13;

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

＆＃13;

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

1 个答案: