my notes ripped shamelessly from https://webpack.academy
- add webpack
yarn add webpack --dev
. this adds to devDependencies - add
{"build": "webpack"}
underscripts
topackage.json
. optionally:
"watch": "webpack --watch",
"start:dev": "webpack -w & nodemon server/app.js",
"build-watch": "npm run build -- -w",
"start-watch": "nodemon server/start.js --watch server --watch db --watch index.js --watch package.json",
"start-dev": "cross-env NODE_ENV=development npm run start-watch",
touch webpack.config.js
- in
webpack.config.js
:
const path = require('path')
const ExamplePlugin = require('ExamplePlugin')
const webpack = require('webpack')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'public')
},
module: {
rules: [
]
},
plugins: [
new ExamplePlugin({})
new webpack.optimize.UglifyJSPlugin()
new webpack.ContextReplacementPlugin()
]
}
- under
rules
here are some common rules:
babel + react: npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
{
"exclude": "/node_modules/",
"include": __dirname + "/browser/",
"loader": "babel-loader",
"options": {
"presets": ["es2015", "react"]
},
"test": /\.jsx?$/
},
dont forget .babelrc
{
"presets": ["es2015", "react"]
}
babel-loader
:
{
test: /\.js$/,
use: 'babel-loader'
}
style loader:
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
image loader: (example that uses options on loader)
{
test: /\.jpe?g$/,
use: [
{loader: 'url-loader', options: {limit: 10000}}
]
}
file-loader
:
{
test: /\.jpe?g$/,
use: ['file-loader']
}