Webpack Notes and Config for React Setup
npm install --save react react-dom prop-types
// Tells imports where to look for files
resolve: {
extensions: ['*', '.js', '.jsx'],
alias: {
'@': resolve('src'),
}
},
Loaders and their Respective file extensions
npm install --save-dev webpack webpack-cli // install webpack and cli
npm install --save-dev style-loader // inject css in html
npm install --save-dev css-loader //css
npm install --save-dev babel-loader @babel/core @babel/preset-env // es6
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react // react jsx
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/preset-react // react jsx with class properties
npm install --save-dev sass-loader node-sass // sass
npm install --save-dev ts-loader //type script
npm install --save-dev file-loader // files, e.g. images, fonts
npm install --save-dev papaparse csv-loader xml-loader // xml, csv and tsvs
npm install --save-dev html-webpack-plugin // dynamically adds script filename to html
npm install --save-dev clean-webpack-plugin // to cleanup teh dist folder
npm install --save-dev source-map // sourcemap with production support
npm install --save-dev inline-source-map // sourcemap with no production support
npm install --save-dev webpack-dev-server // webpack devserver
npm install --save-dev react-hot-loader // react hot module
npm install --save-dev mini-css-extract-plugin // splits css into seperate file
Configure Babel for react
// Create .babelrc file and put in
{
"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/plugin-proposal-class-properties"]
}
devServer: {
contentBase: './dist'
},
Hot modyle replacement (used by webpack dev server)
new webpack.HotModuleReplacementPlugin()
devtool: 'inline-source-map',
// devtool: 'source-map',
import MyImage from './my-image.png'
// will be replaced by file-loader
url('./my-image.png')
// will be replaced by css-loader in css or scss files
<img src="./my-image.png" />
// will be replaced by html-loader
@font-face {
font-family: "Advent Pro";
font-style: normal;
font-weight: 400;
src: url("./MyFont.woff2") format("woff2"),
url("./MyFont.woff") format("woff");
} // MyFont.woff2 and MyFont.woff will be copied to src by default
{
test: /\.(csv|tsv)$/,
use: ["csv-loader"]
}
{
test: /\.xml$/,
use: ["xml-loader"]
}
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
/* entry: {
app: "path/to/entry1.js",
vendor: "path/to/entry2.js",
}, */ // multiple entry points
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist')
},
/* output: {
filename: '[name].js', // for name
filename: '[hash].js', // for hash
path: __dirname + '/dist'
}, */ // For multi outputf iles
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
{
loader: "css-loader",
options: {
modules: true
}
}, // translates CSS into CommonJS
{
loader: "sass-loader",
options: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
} // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
loader:"file-loader",
options: {
name: '[path][name].[ext]', // Defaults to [hash].[ext]
},
/* name(file) {
if (process.env.NODE_ENV === 'development') {
return '[path][name].[ext]';
}
return '[hash].[ext]';
} //Using function */
]
}
{ test: /\.ts$/, use: 'ts-loader' }
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
title: "Learning Webpack"
})
]
};
plugins: [
new webpack.HotModuleReplacementPlugin(), // for hot module replacement
new CleanWebpackPlugin(), // During build cleans the dist folder befor compiling assets
new HtmlWebpackPlugin({ //Controls how to create the index.html file in dist folder
template: "./src/index.html",
filename: "index.html",
title: "Learning Webpack"
})
]