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?
Add a comment |
1 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' ]} }; "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" }'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') );
1 Comment
Wilfred
Solved my problem. Thank you!