This is a simple webpack 3 tutorial, which should help you familiarize with the basics of webpack.
Node.js
npm install
-
npm run build
for development mode -
npm run build:prod
for production mode
The build commands build our simple app from the ./src
folder and output to ./dist
folder.
npm run dev
This will run webpack in dev mode using webpack-dev-server. It also enables hot reloading, which allows you to modify your source code without having to refresh the browser after each change.
npm run start
The run command will serve the folder ./dist
using the Express server at http://localhost:3000
Webpack comes with a configuration file with the following structure :
var config = {
entry: { ... },
output: { ... },
module: {
rules: [ ...
]
}
}
There are mainly three sections on the config file :
entry
: defines where your source files areoutput
: is the folder where webpack create the bundlemodule/rules
: contains rule to apply for each type of file (i.e .js/ .css, .scss, etc)
- babel-loader for JS files
- style-loader & css-loader for CSS files
- file-loader for HTML files
Here's the complete config for webpack.config.js
var config = {
context: __dirname + '/src', // `__dirname` is root of project and `src` is source
entry: {
app: './main.js',
},
output: {
path: __dirname + '/dist', // `dist` is the destination for the bundle
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/, // rule for js files
exclude: /node_modules/,
loader: "babel-loader" // aply this loader for js files
}
,
{
test: /\.css$/,
use: [
'style-loader', // the order is very important. it executes in reverse order !!!
'css-loader' // this is loaded first !!!
]
}
]
}
}