基于webpack 实用配置方法总结


Posted in Javascript onSeptember 28, 2017

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

npm run webpack

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

Javascript 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
ant design实现圈选功能
Dec 17 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 #Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 #jQuery
浅谈JavaScript find 方法不支持IE的问题
Sep 28 #Javascript
VueJS事件处理器v-on的使用方法
Sep 27 #Javascript
javascript基本常用排序算法解析
Sep 27 #Javascript
Angularjs cookie 操作实例详解
Sep 27 #Javascript
js移动端图片压缩上传功能
Aug 18 #Javascript
You might like
Windows下的PHP5.0详解
2006/11/18 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
纽约海:Sea New York
2018/11/04 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
师范生的个人求职信范文
2014/01/04 职场文书
党校学习思想汇报
2014/01/06 职场文书
房屋继承公证书
2014/04/10 职场文书
运动会宣传口号
2014/06/09 职场文书
公司授权委托书范文
2014/09/21 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
创业计划书之美容店
2019/09/16 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
go语言求任意类型切片的长度操作
2021/04/26 Golang
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
Elasticsearch 配置详解
2022/04/19 Java/Android