1. The configuration file is:
// Handle common and common jsvar webpack = require('webpack');
//Processing html templatevar htmlWebpackPlugin = require('html-webpack-plugin');
//CSS packaged separatelyvar ExtractTextPlugin = require("extract-text-webpack-plugin");
// Method to get html-webpack-plugin parametersvar getHtmlConfig = function(name, title) {
return {
//Location of local template file template: './src/view/' + name + '.html',
//The directory and file name of the output file filename: 'view/' + name + '.html',
//Add a specific favicon path to the output html document favicon: './',
//Title of the generated html document title: title,
//Inject all static resources into template or templateContent, the injection locations of different configuration values are different. true or body: All JavaScript resources are inserted into the bottom of the body element inject: true,
//Are you adding the unique hash value generated by webpack every time you compile the static resources hash: true,
//Allow some chunks inserted into the template. If you do not configure this item, all thunks in the entry will be injected into the template by default. When configuring multiple pages, the thunk injected by each page should be different, and different thunks need to be injected into different pages through this configuration; chunks: ['common', name]
};
};
var config = {
//Multi-page configuration entry: {
//General module 'common': ['./src/page/common/'],
//Login module 'login': ['./src/page/login/'],
//front page 'index': ['./src/page/index/']
},
output: {
// Where to store files after packaging path: __dirname + '/dist',
// Packed file name filename: 'js/[name].js'
},
//Load external variables or modules in, and do not compile external variables or modules into the file externals: {
'jquery': ''
},
module: {
loaders: [
//Compile ES6 {
test: /\.js$/,
//The following directory will not be processed exclude: /node_modules/,
//Processing the following directory include: /src/,
loader: "babel-loader?cacheDirectory",
//The configured target running environment automatically enables the required babel plug-in query: {
presets: ['latest']
}
},
//handle css {
test: /\.css$/,
//CSS packaged separately use: ({
fallback: "style-loader",
use: [{
loader: 'css-loader',
options: {
//Support @important to introduce css importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
//Be sure to write it before require("autoprefixer"), otherwise require("autoprefixer") will be invalid require('postcss-import')(),
require("autoprefixer")({
"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
})
]
}
}
}
]
})
},
//handle less (sass) {
test: /\.less$/,
//CSS packaged separately use: ({
fallback: "style-loader",
use: [{
loader: 'css-loader',
options: {
//Support @important to introduce css importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
//Be sure to write it before require("autoprefixer"), otherwise require("autoprefixer") will be invalid require('postcss-import')(),
require("autoprefixer")({
"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
})
]
}
}
},
'less-loader'
]
})
},
//Processing pictures {
test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/i,
loaders: [
//Images less than 8k are compiled into base64, and images greater than 10k are used to use file-loader 'url-loader?limit=8192&name=img/[name]-[hash:5].[ext]',
//Picture compression 'image-webpack-loader'
]
}
]
},
plugins: [
//html template processing new htmlWebpackPlugin(getHtmlConfig('index', 'front page')),
new htmlWebpackPlugin(getHtmlConfig('login', 'Login page')),
//Compiled to js/ new ({
//The block name of the common block name: 'common',
//The generated file name filename: 'js/'
}),
//CSS alone new ExtractTextPlugin('css/[name].css')
]
}
= config;
2. The file is:
{
"name": "webpack",
"version": "1.0.0",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config --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",
"": "^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",
"": "^3.1.3",
"binary-extensions": "^1.10.0",
"": "^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",
"": "^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",
"": "^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",
"": "^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",
"": "^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",
"": "^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
The above summary of practical configuration methods based on webpack is all the content I share with you. I hope you can give you a reference and I hope you can support me more.