Straight-to-the-point startup guide for webpack
source link: https://www.tuicool.com/articles/eEZv2qQ
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.
This is a basic guide to help you get started with webpack
v4. If you're interested, there is also a cheat sheet forrollup.js
Install the package
npm install webpack webpack-cli --save-dev
Create the scripts in your pacakge.json
file.
... scripts: { "webpack-dev": "webpack --mode=development", "webpack-prod": "webpack --mode=production", "webpack-watch": "webpack --watch" } ...
Create webpack.config.js
file
const path = require('path'); module.exports = { // watch: true, we can enable watch via config too // mode: 'production', we can change the mode via config too entry: './src/my-entry-file.js', output: { path: path.resolve(__dirname, 'public'), filename: 'my-bundle-name.js' } };
Run the commands
## build bundles without minification (dev environment) npm run webpack-dev ## build bundles with minification (prod environment) npm run webpack-prod ## compile on save npm run webpack-watch
Multiple entries
const path = require('path'); module.exports = { entry: { home: './src/home.js', contact: './src/contact.js' }, output: { path: path.resolve(__dirname, 'public'), filename: '[name].js' } };
The config above tells the webpack to create home.js and contact.js files.
Loaders
Loaders allow webpack to process other types of files and convert them into valid modules.
Babel
Install the required packages.
npm install @babel/core babel-loader @babel/preset-env --save-dev
In webpack.config.js
add module section.
module.exports = { ... module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }] } };
Create .babelrc
file.
{ "presets": ["@babel/env"] }
CSS
Install the packages
npm install css-loader style-loader --save-dev
In webpack.config.js
update the module section.
module.exports = { ... module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }] } };
This enables you to import your styles within the JavaScript files
import './main.css'
Images
Install the packages
npm install url-loader --save-dev
In webpack.config.js
update the module section.
module.exports = { ... module: { rules: [{ test: /\.(png|jp(e*)g|svg|gif)$/, use: [{ loader: 'url-loader', options: { limit: 8000, // Convert images smaller than 8kb to base64 strings name: 'images/[hash]-[name].[ext]' } }] }] } };
Plugins
Copy Webpack Plugin
This plugin is useful for copying images from source to public folder for example.
Install the packages
npm install copy-webpack-plugin --save-dev
In webpack.config.js
add plugins section.
const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { ... plugins: [ new CopyWebpackPlugin([ { from: './src/images', to: 'images' } ]) ] };
This will tell the webpack
to copy the images from the source to the destination folder.
If you liked this quick guide, do share it and show me some love by buying me a coffee .
To stay tuned for future articles and cheat sheets, subscribe here or follow me on twitter .
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK