Ad

How Can I Use Webpack To Copy Files To The Distribution Folder?

- 1 answer

In my index.html I need to include a JS and CSS file. They must be included there and cannot be required or imported. How can I simply have webpack grab the files I need and place them in the dist folder?

Ad

Answer

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

Ad
source: stackoverflow.com
Ad