Zusammenfassung der Webpack-Konfigurationsmethoden

Weiß jeder, wie man Webpack konfiguriert? Dieser Artikel teilt Ihnen hauptsächlich die praktischen Konfigurationsmethoden von Webpack mit und gibt Ihnen auch eine Referenz. Ich hoffe, er kann Ihnen helfen.

1. Die Konfigurationsdatei webpack.config.js ist:

//处理共用、通用的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. Die Datei package.json ist:

{
 "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. Befehlszeile:

npm run webpack

Verwandte Empfehlungen:

Detaillierte Erläuterung der NPM- und Webpack-Konfigurationsmethoden in node.js

Webpack-Konfiguration Detaillierte Erläuterung des Back-End-Renderings

Beispiel für eine ausführliche Erläuterung der für Vue-CLI optimierten Webpack-Konfiguration

Das obige ist der detaillierte Inhalt vonZusammenfassung der Webpack-Konfigurationsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!