下面小编就为大家带来一篇基于webpack 实用配置方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1、webpack.config.js配置文件为:

//处理共用、通用的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、package.json文件为:

{
 "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": "^.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、命令行:

npm run webpack

以上这篇基于webpack 实用配置方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
刷短视频玩小游戏,哪个才是代表未来的正经事?

刷短视频玩小游戏,哪个

互联网中两个被越隔越远的世界,一个世界里的人喜欢用尽
轻应用开发的"下半场",会是一场鸡肋反击战吗?

轻应用开发的"下半场

轻应用虽然起步很早,但其他产品模式没有给它留下生存空
从2.5亿美元到479亿美元,小米的增长黑客逻辑是什么

从2.5亿美元到479亿美

小米增长等式:参与度 ×迭代速度 ×转化率 × 复购率
冯鑫内部两小时长谈:复盘暴风上市三年最大失误

冯鑫内部两小时长谈:复

冯鑫复盘暴风上市三年最大失误。
世界杯快结束了,VAR的故事才刚刚开始

世界杯快结束了,VAR的

眼看世界杯只剩下不到十场比赛,VAR的争议却似乎刚刚开
暴风身陷风暴

暴风身陷风暴

股价大跌、现金流遭问询、实控人股份被部分冻结、“小
最新文章
Angular2进阶之如何避免Dom误区

Angular2进阶之如何避

这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小
使用FileReader API创建Vue文件阅读器组件

使用FileReader API创

这篇文章主要介绍了使用FileReader API创建一个Vue的
react 实现页面代码分割、按需加载的方法

react 实现页面代码分

本篇文章主要介绍了react 实现页面代码分割、按需加载
Vue项目分环境打包的实现步骤

Vue项目分环境打包的

这篇文章主要介绍了Vue项目如何分环境打包,实现方法大
vue 组件中slot插口的具体用法

vue 组件中slot插口的

这篇文章主要介绍了vue 中slot 的具体用法,包括子组件
JS遍历DOM文档树的方法实例详解

JS遍历DOM文档树的方

这篇文章主要介绍了JS遍历DOM文档树的方法,结合实例形