There are large numbers of tutorials about
webpack, they are too simple for newcomers, if you want a productional config, you need hours for reading more documents and tutorials.
Here is my
webpack config in real world.
Some points should be known:
- I use latest
- You don't have to set an
functionis ok, the
envargument will be populate with
npm, I create a script in
package.json, like this:
node_modules/bin/webpack.js -d --watch --progress --env=dev
- multip entry points are common for medium or large sites, you always want to only build `application codes instead of library codes after changed code.
- name template in
output.filename, you should use
[hash], if you use
[hash], every build will generate a new hash, so your application and library bundle names will changed every build.
- make your
package.jsondependencies as vendor value is good, so make sure you put right
resolve.aliasis used for
rules, I defined two alias,
static, if a path in
import ... from xxxor other supported import methods, this path can be resolved, e.g.
require('scss/main.scss'), loader can resolve
scssad path to some directory, so the loader can read that file and process by specified loaders.
- I used
sass(scss), so I need
- Why there are
url()in css files, when it finds an url, it read it and pass it to some loader, e.g. it found a png image file, it will pass to
url-loader, if that file is small enough,
url-loaderwill replace png file with base64 encoded data, you will find it is replaced by base64 data in compiled css bundle file.
style-loadercan insert css content in
<style></style>, I don't need it.
file-loadercan hash files and replace file path with hashed path, that's great for CDN.
css-loader, my css
url()path is absolute path, e.g.
root=static, the path will become
'static/mobile/img/logo.png', all my images are placed on
staticdirectory are public directory on
- I use
HtmlWebpackPluginfor generate css and js references, it will generate some
webpack.optimize.CommonsChunkPluginwith two chunks, vendor is for
vendorentry point, and
manifestis a workaround for this plugin, it will prevent vendor chunkhash changed on every build.
CleanWebpackPluginis a plugin which can clean you dist directory before build.
Subscribe to TradeOff
Get the latest posts delivered right to your inbox