Est-ce que tout le monde sait comment configurer Webpack ? Cet article partage principalement avec vous les méthodes pratiques de configuration de webpack, et vous donne également une référence, j'espère qu'il pourra vous aider.
1. Le fichier de configuration webpack.config.js est :
//处理共用、通用的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. Le fichier package.json est :
{
"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. Ligne de commande :
npm run webpack
Recommandations associées :
Explication détaillée des méthodes de configuration npm et webpack dans node.js
Configuration du webpack Explication détaillée du rendu back-end
Exemple d'explication détaillée de la configuration du webpack optimisé vue-cli
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Balises HTML courantes
Les dix principaux échanges de devises numériques
Comment utiliser la fonction dict en Python
Est-ce que plus la fréquence du processeur de l'ordinateur est élevée, mieux c'est ?
Comment utiliser les bugs de recherche
Quels sont les attributs d'une balise ?
utilisation de l'instruction switch
Utilisation de caractères arbitraires dans les expressions régulières
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
