Résumé des méthodes de configuration du webpack

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!