Does everyone know how to configure webpack? This article mainly shares with you the practical configuration methods of webpack, and also gives you a reference. I hope it can help you.
1. The webpack.config.js configuration file is:
//处理共用、通用的js
var webpack = require('webpack');
//处理html模板
var htmlWebpackPlugin = require('html-webpack-plugin');
//css单独打包
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name, title) {
return {
//本地模板文件的位置
template: './src/view/' + name + '.html',
//输出文件的目录和文件名称
filename: 'view/' + name + '.html',
//添加特定favicon路径到输出的html文档中
favicon: './favicon.ico',
//生成的html文档的标题
title: title,
//向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。true或者body：所有JavaScript资源插入到body元素的底部
inject: true,
//是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
hash: true,
//允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
chunks: ['common', name]
};
};
var config = {
//多页面配置
entry: {
//通用模块
'common': ['./src/page/common/index.js'],
//登录模块
'login': ['./src/page/login/index.js'],
//首页
'index': ['./src/page/index/index.js']
},
output: {
//打包后文件存放的地方
path: __dirname + '/dist',
//打包后的文件名
filename: 'js/[name].js'
},
//将外部变量或者模块加载进来，并且不将外部变量或者模块编译进文件中
externals: {
'jquery': 'window.jQuery'
},
module: {
loaders: [
//编译ES6
{
test: /\.js$/,
//以下目录不处理
exclude: /node_modules/,
//处理以下目录
include: /src/,
loader: "babel-loader?cacheDirectory",
//配置的目标运行环境自动启用需要的 babel 插件
query: {
presets: ['latest']
}
},
//处理css
{
test: /\.css$/,
//css单独打包
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader',
options: {
//支持@important引入css
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
//一定要写在require("autoprefixer")前面，否则require("autoprefixer")无效
require('postcss-import')(),
require("autoprefixer")({
"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
})
]
}
}
}
]
})
},
//处理less（同理sass）
{
test: /\.less$/,
//css单独打包
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader',
options: {
//支持@important引入css
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
//一定要写在require("autoprefixer")前面，否则require("autoprefixer")无效
require('postcss-import')(),
require("autoprefixer")({
"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
})
]
}
}
},
'less-loader'
]
})
},
//处理图片
{
test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/i,
loaders: [
//小于8k的图片编译为base64，大于10k的图片使用file-loader
'url-loader?limit=8192&name=img/[name]-[hash:5].[ext]',
//图片压缩
'image-webpack-loader'
]
}
]
},
plugins: [
//html模板处理
new htmlWebpackPlugin(getHtmlConfig('index', '首页')),
new htmlWebpackPlugin(getHtmlConfig('login', '登录页')),
//通用模块编译到js/common.js
new webpack.optimize.CommonsChunkPlugin({
//公共块的块名称
name: 'common',
//生成的文件名
filename: 'js/common.js'
}),
//css单独打
new ExtractTextPlugin('css/[name].css')
]
}
module.exports = config;2. The package.json file is:
{
"name": "webpack",
"version": "1.0.0",
"main": "bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.4",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-latest": "^6.24.1",
"css-loader": "^0.28.7",
"ejs-loader": "^0.3.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.4.2",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.5.6",
"webpack-dev-server": "^2.8.2"
},
"dependencies": {
"acorn": "^5.1.2",
"acorn-dynamic-import": "^2.0.2",
"ajv": "^5.2.2",
"ajv-keywords": "^2.1.0",
"align-text": "^0.1.4",
"ansi-regex": "^3.0.0",
"anymatch": "^1.3.2",
"arr-diff": "^2.0.0",
"arr-flatten": "^1.1.0",
"array-unique": "^0.2.1",
"asn1.js": "^4.9.1",
"assert": "^1.4.1",
"async": "^2.5.0",
"async-each": "^1.0.1",
"balanced-match": "^1.0.0",
"base64-js": "^1.2.1",
"big.js": "^3.1.3",
"binary-extensions": "^1.10.0",
"bn.js": "^4.11.8",
"brace-expansion": "^1.1.8",
"braces": "^1.8.5",
"brorand": "^1.1.0",
"browserify-aes": "^1.0.8",
"browserify-cipher": "^1.0.0",
"browserify-des": "^1.0.0",
"browserify-rsa": "^4.0.1",
"browserify-sign": "^4.0.4",
"browserify-zlib": "^0.1.4",
"buffer": "^4.9.1",
"buffer-xor": "^1.0.3",
"builtin-modules": "^1.1.1",
"builtin-status-codes": "^3.0.0",
"camelcase": "^4.1.0",
"center-align": "^0.1.3",
"chokidar": "^1.7.0",
"cipher-base": "^1.0.4",
"cliui": "^3.2.0",
"co": "^4.6.0",
"code-point-at": "^1.1.0",
"concat-map": "^0.0.1",
"console-browserify": "^1.1.0",
"constants-browserify": "^1.0.0",
"core-util-is": "^1.0.2",
"create-ecdh": "^4.0.0",
"create-hash": "^1.1.3",
"create-hmac": "^1.1.6",
"cross-spawn": "^5.1.0",
"crypto-browserify": "^3.11.1",
"d": "^1.0.0",
"date-now": "^0.1.4",
"decamelize": "^1.2.0",
"des.js": "^1.0.0",
"diffie-hellman": "^5.0.2",
"domain-browser": "^1.1.7",
"elliptic": "^6.4.0",
"emojis-list": "^2.1.0",
"enhanced-resolve": "^3.4.1",
"errno": "^0.1.4",
"error-ex": "^1.3.1",
"es5-ext": "^0.10.30",
"es6-iterator": "^2.0.1",
"es6-map": "^0.1.5",
"es6-set": "^0.1.5",
"es6-symbol": "^3.1.1",
"es6-weak-map": "^2.0.2",
"escope": "^3.6.0",
"esrecurse": "^4.2.0",
"estraverse": "^4.2.0",
"event-emitter": "^0.3.5",
"events": "^1.1.1",
"evp_bytestokey": "^1.0.3",
"execa": "^0.7.0",
"expand-brackets": "^0.1.5",
"expand-range": "^1.8.2",
"extglob": "^0.3.2",
"fast-deep-equal": "^1.0.0",
"filename-regex": "^2.0.1",
"fill-range": "^2.2.3",
"find-up": "^2.1.0",
"for-in": "^1.0.2",
"for-own": "^0.1.5",
"fsevents": "^1.1.2",
"get-caller-file": "^1.0.2",
"get-stream": "^3.0.0",
"glob-base": "^0.3.0",
"glob-parent": "^2.0.0",
"graceful-fs": "^4.1.11",
"has-flag": "^2.0.0",
"hash-base": "^3.0.4",
"hash.js": "^1.1.3",
"hmac-drbg": "^1.0.1",
"hosted-git-info": "^2.5.0",
"https-browserify": "^0.0.1",
"ieee754": "^1.1.8",
"indexof": "^0.0.1",
"inherits": "^2.0.3",
"interpret": "^1.0.3",
"invert-kv": "^1.0.0",
"is-arrayish": "^0.2.1",
"is-binary-path": "^1.0.1",
"is-buffer": "^1.1.5",
"is-builtin-module": "^1.0.0",
"is-dotfile": "^1.0.3",
"is-equal-shallow": "^0.1.3",
"is-extendable": "^0.1.1",
"is-extglob": "^1.0.0",
"is-fullwidth-code-point": "^2.0.0",
"is-glob": "^2.0.1",
"is-number": "^3.0.0",
"is-posix-bracket": "^0.1.1",
"is-primitive": "^2.0.0",
"is-stream": "^1.1.0",
"isarray": "^1.0.0",
"isexe": "^2.0.0",
"isobject": "^2.1.0",
"jquery": "^3.2.1",
"json-loader": "^0.5.7",
"json-schema-traverse": "^0.3.1",
"json-stable-stringify": "^1.0.1",
"json5": "^0.5.1",
"jsonify": "^0.0.0",
"kind-of": "^4.0.0",
"lazy-cache": "^1.0.4",
"lcid": "^1.0.0",
"load-json-file": "^2.0.0",
"loader-runner": "^2.3.0",
"loader-utils": "^1.1.0",
"locate-path": "^2.0.0",
"lodash": "^4.17.4",
"longest": "^1.0.1",
"lru-cache": "^4.1.1",
"md5.js": "^1.3.4",
"mem": "^1.1.0",
"memory-fs": "^0.4.1",
"micromatch": "^2.3.11",
"miller-rabin": "^4.0.0",
"mimic-fn": "^1.1.0",
"minimalistic-assert": "^1.0.0",
"minimalistic-crypto-utils": "^1.0.1",
"minimatch": "^3.0.4",
"minimist": "^0.0.8",
"mkdirp": "^0.5.1",
"node-libs-browser": "^2.0.0",
"normalize-package-data": "^2.4.0",
"normalize-path": "^2.1.1",
"npm-run-path": "^2.0.2",
"number-is-nan": "^1.0.1",
"object-assign": "^4.1.1",
"object.omit": "^2.0.1",
"os-browserify": "^0.2.1",
"os-locale": "^2.1.0",
"p-finally": "^1.0.0",
"p-limit": "^1.1.0",
"p-locate": "^2.0.0",
"pako": "^0.2.9",
"parse-asn1": "^5.1.0",
"parse-glob": "^3.0.4",
"parse-json": "^2.2.0",
"path-browserify": "^0.0.0",
"path-exists": "^3.0.0",
"path-is-absolute": "^1.0.1",
"path-key": "^2.0.1",
"path-type": "^2.0.0",
"pbkdf2": "^3.0.14",
"pify": "^2.3.0",
"preserve": "^0.2.0",
"process": "^0.11.10",
"process-nextick-args": "^1.0.7",
"prr": "^0.0.0",
"pseudomap": "^1.0.2",
"public-encrypt": "^4.0.0",
"punycode": "^1.4.1",
"querystring": "^0.2.0",
"querystring-es3": "^0.2.1",
"randomatic": "^1.1.7",
"randombytes": "^2.0.5",
"read-pkg": "^2.0.0",
"read-pkg-up": "^2.0.0",
"readable-stream": "^2.3.3",
"readdirp": "^2.1.0",
"regex-cache": "^0.4.4",
"remove-trailing-separator": "^1.1.0",
"repeat-element": "^1.1.2",
"repeat-string": "^1.6.1",
"require-directory": "^2.1.1",
"require-main-filename": "^1.0.1",
"right-align": "^0.1.3",
"ripemd160": "^2.0.1",
"safe-buffer": "^5.1.1",
"semver": "^5.4.1",
"set-blocking": "^2.0.0",
"set-immediate-shim": "^1.0.1",
"setimmediate": "^1.0.5",
"sha.js": "^2.4.8",
"shebang-command": "^1.2.0",
"shebang-regex": "^1.0.0",
"signal-exit": "^3.0.2",
"source-list-map": "^2.0.0",
"source-map": "^0.5.7",
"spdx-correct": "^1.0.2",
"spdx-expression-parse": "^1.0.4",
"spdx-license-ids": "^1.2.2",
"stream-browserify": "^2.0.1",
"stream-http": "^2.7.2",
"string-width": "^2.1.1",
"string_decoder": "^1.0.3",
"strip-ansi": "^4.0.0",
"strip-bom": "^3.0.0",
"strip-eof": "^1.0.0",
"supports-color": "^4.4.0",
"tapable": "^0.2.8",
"timers-browserify": "^2.0.4",
"to-arraybuffer": "^1.0.1",
"tty-browserify": "^0.0.0",
"uglify-js": "^2.8.29",
"uglify-to-browserify": "^1.0.2",
"uglifyjs-webpack-plugin": "^0.4.6",
"url": "^0.11.0",
"util": "^0.10.3",
"util-deprecate": "^1.0.2",
"validate-npm-package-license": "^3.0.1",
"vm-browserify": "^0.0.4",
"watchpack": "^1.4.0",
"webpack": "^3.5.6",
"webpack-sources": "^1.0.1",
"which": "^1.3.0",
"which-module": "^2.0.0",
"window-size": "^0.1.0",
"wordwrap": "^0.0.2",
"wrap-ansi": "^2.1.0",
"xtend": "^4.0.1",
"y18n": "^3.2.1",
"yallist": "^2.1.2",
"yargs": "^8.0.2",
"yargs-parser": "^7.0.0"
},
"description": ""
}3. Command line:
npm run webpack
Related recommendations:
Detailed explanation of npm and webpack configuration methods in node.js
Detailed explanation of back-end rendering after webpack configuration
Detailed example of vue-cli optimized webpack configuration
The above is the detailed content of Summary of webpack configuration methods. For more information, please follow other related articles on the PHP Chinese website!
switch statement usage
Ranking of foreign CDN service providers
What are the registration-free spaces in China?
What is ^quxjg$c
How to solve the problem that document.cookie cannot be obtained
How to close secure boot
What does STO mean in blockchain?
Solution to the problem that setting the Chinese interface of vscode does not take effect
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
