webpack常用属性及插件

1、entry（入口）：string | object | function | array

  • string:一般配置为单入口文件
  • object：多页面应用
  • function：动态入口
  • array：多入口

2、output（出口）：

  • path:输出的绝对路径
  • publicPath：资源输出的服务上路径，默认是空字符串，一般情况下为 /，当输出服务不确定时，可以用文件 webpack_public_path = window.location.protocol+"//"+"window.location.host" 来配置

filename（输出的文件名）：

  • "bundle.js"
  • "[name].bundle.js"
  • "[id].bundle.js"
  • "[name].[hash].bundle.js"
  • "[chunkhash].bundle.js"

3、module（加载器）：

+noParse：RegExp | [RegExp] 阻止解析任何文件
+rules:array 指定加载器

  • test：配置匹配规则 正则
  • use：数组|字符串。指定loader加载器及加载顺序，自右向左依次加载， 注意options用法。
use: [
  'style-loader',
    {
      loader: 'css-loader',
      options: {
      importLoaders: 1
      }
  },
  {
    loader: 'less-loader',
    options: {
      noIeCompat: true
    }
  }
]

{
  loader: "css-loader",
  options: {
    modules: true
  }
}
  • include：匹配捷径
  • exclude：指定不匹配项

3、resolve：

  • alias：object 路径别名（懒癌福音）
    详情https://webpack.js.org/configuration/resolve/
  • extensions：array 路径扩展，例如：
    extensions: [".js", ".json"] 当引入文件的时候不必写后缀名，注意只能在.js文件中使用
  • modules：指定优先查找模块顺序，例如：modules: [path.resolve(__dirname, "src"), "node_modules"]，会优先在src中查找，再在node_modules中查找

4、plugins（插件）：

https://webpack.js.org/configuration/plugins/#plugins
https://webpack.js.org/plugins/

  • webpack.DefinePlugin：全局变量定义。很多库的内部，有process.NODE_ENV的判断语句，开发模式设置为development 发布改为production。最直观的就是没有所有的debug相关的东西，体积会减少很多，
    例如： new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"development"',
    DEV: true
    }),
  • new webpack.HotModuleReplacementPlugin()：启用热替换,仅开发模式需要
  • new webpack.NamedModulesPlugin()：prints more readable module names in the browser console on HMR updates
  • new webpack.NoEmitOnErrorsPlugin()：允许错误不打断程序运行（一般开发模式中用）
  • BannerPlugin：为每个chunk添加一个top注释
  • ExtractTextWebpackPlugin：提取css
  • HtmlWebpackPlugin：配置模板html
    最后贴上配置development release：
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const svgDirs = [
  require.resolve('antd-mobile').replace(/warn\.js$/,''),  // 1. 属于 antd-mobile 内置 svg 文件
  path.resolve(__dirname, 'src/images/svg')  // 2. 自己私人的 svg 存放目录
];
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  // 关于选项的选择，http://cheng.logdown.com/posts/2016/03/25/679045
  // 具体请参考 https://webpack.js.org/configuration/devtool/#components/sidebar/sidebar.jsx

  context: path.resolve(__dirname, 'src'),
  // 指定资源读取的根目录
  // https://webpack.js.org/configuration/entry-context/#components/sidebar/sidebar.jsx

  target: 'web',
  // https://webpack.js.org/configuration/target/

  entry: [
    'webpack-public-path',
    'react-hot-loader/patch',
    'webpack-hot-middleware/client?reload=true',
    'index.js'
  ],
  // https://webpack.js.org/configuration/entry-context/

  output: {
    path: path.join(__dirname, 'src'),
    // 输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它

    publicPath: '/',
    // 模板、样式、脚本、图片等资源对应的server上的路径

    filename: 'bundle.js',
    // 命名生成的JS
  },
  // https://webpack.js.org/configuration/output/

  module: {
    rules: [
      {
        test: /\.es6|jsx|js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },

      /*私有样式，模块化处理*/
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName:'[local]___[hash:base64:5]'
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                parser: 'postcss-scss'
              }
            }
          ]
        }),
        include: path.resolve(__dirname, 'src/js')
      },

      /*公有样式*/
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                parser: 'postcss-scss'
              }
            }
          ]
        }),
        include: path.resolve(__dirname, 'src/styles')
      },

      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'node_modules'),
        use: ExtractTextPlugin.extract({
          use: 'css-loader'
        })
      },

      {
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        exclude: svgDirs,
        options: {
          limit: 15000
        }
      },

      {
        test:/\.(svg)$/i,
        loader: 'svg-sprite-loader',
        include: svgDirs,
        options: {
          limit: 15000
        }
      }
    ]
  },

  // 引入外部库
  // 适用于一些常用且体积较大的库，充分利用CDN加速，减轻服务器负担，降低加载时间！
  // https://webpack.js.org/configuration/externals/
  externals:{
    moment: 'moment'
  },

  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'src')
    ],
    // 这样，webpack在查找模块时，先查找 node_modules ，如果没找到则在 src 中查找

    extensions: ['.web.js', '.js', '.json'],
    // 该配置项将不再要求强制转入一个空字符串，而被改动到了resolve.enforceExtension下
    // 相关文档 https://webpack.js.org/configuration/resolve/

    // 路径别名, 懒癌福音
    alias:{
      app: path.resolve(__dirname,'src/js'),
      // 以前你可能这样引用 import { Nav } from '../../components'
      // 现在你可以这样引用 import { Nav } from 'app/components'

      style: path.resolve(__dirname,'src/styles')
      // 以前你可能这样引用 import '../../../styles/mixins.scss'
      // 现在你可以这样引用 import 'style/mixins.scss'

      // 注意：别名只能在.js文件中使用。
    }
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"',
      __DEV__: true
    }),
    // 很多库的内部，有process.NODE_ENV的判断语句，
    // 改为production。最直观的就是没有所有的debug相关的东西，体积会减少很多

    new webpack.HotModuleReplacementPlugin(),
    // 启用热替换,仅开发模式需要

    new webpack.NamedModulesPlugin(),
    // prints more readable module names in the browser console on HMR updates

    new webpack.NoEmitOnErrorsPlugin(),
    // 允许错误不打断程序，,仅开发模式需要
    //
    new ExtractTextPlugin('vendor.css'),

    new HtmlWebpackPlugin({
      title: '开发模式',

      filename: 'index.html',
      // 文件名以及文件将要存放的位置

      favicon: 'favicon.ico',
      // favicon路径

      template: 'index.html',
      // html模板的路径

      inject: 'body',
      // js插入的位置，true/'head'  false/'body'
    })
  ]
};

release

/**
 * 产品模式下的 webpack2 配置
 *
 * 注意。两种模式的配置有较大差异！！
 *
 * webpack2 官方配置地址 https://webpack.js.org/configuration/externals/
 */

const path = require('path');
const webpack = require('webpack');
const WebpackMd5Hash = require('webpack-md5-hash');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const svgDirs = [
  require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. 属于 antd-mobile 内置 svg 文件
  path.resolve(__dirname, 'src/images/svg')  // 2. 自己私人的 svg 存放目录
];

module.exports = {
  devtool: 'cheap-module-source-map',
  // 关于选项的选择，http://cheng.logdown.com/posts/2016/03/25/679045
  // 具体请参考 https://webpack.js.org/configuration/devtool/#components/sidebar/sidebar.jsx

  context: path.resolve(__dirname, 'src'),
  // 注意，这里指定资源读取的根目录
  // https://webpack.js.org/configuration/entry-context/#components/sidebar/sidebar.jsx

  target: 'web',
  // https://webpack.js.org/configuration/target/

  entry: {
    vendor: [
      'react',
      'react-dom',
      'react-router',
      'dateformat',
      'object-assign',
      'es6-promise',
      'whatwg-fetch',
      'react-tap-event-plugin',
      'antd-mobile'
    ],
    app: 'index.js',
  },
  // https://webpack.js.org/configuration/entry-context/

  output: {
    path: path.join(__dirname, 'dist'),
    // 输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它

    publicPath: '',
    // 模板、样式、脚本、图片等资源对应的server上的路径

    filename: 'bundle.js'
    // 命名生成的JS
  },
  // https://webpack.js.org/configuration/output/

  module: {
    rules: [
      {
        test: /\.es6|jsx|js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },

      /*私有样式，模块化处理*/
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName:'[local]___[hash:base64:5]'
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                parser: 'postcss-scss'
              }
            }
          ]
        }),
        include: path.resolve(__dirname, 'src/js')
      },

      /*公有样式*/
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                parser: 'postcss-scss'
              }
            }
          ]
        }),
        include: path.resolve(__dirname, 'src/styles')
      },

      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'node_modules'),
        use: ExtractTextPlugin.extract({
          use: 'css-loader'
        })
      },

      {
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        exclude: svgDirs,
        options: {
          limit: 15000
        }
      },

      {
        test:/\.(svg)$/i,
        loader: 'svg-sprite-loader',
        include: svgDirs,
        options: {
          limit: 15000
        }
      }
    ]
  },

  // 引入外部库
  // 适用于一些常用且体积较大的库，充分利用CDN加速，减轻服务器负担，降低加载时间！
  // https://webpack.js.org/configuration/externals/
  externals:{
    moment: 'moment'
  },

  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'src')
    ],
    // 这样，webpack在查找模块时，先查找 node_modules ，如果没找到则在 src 中查找

    extensions: ['.web.js', '.js', '.jsx', '.es6', '.json'],
    // 该配置项将不再要求强制转入一个空字符串，而被改动到了resolve.enforceExtension下
    // 相关文档 https://webpack.js.org/configuration/resolve/

    // 路径别名, 懒癌福音
    alias:{
      app: path.resolve(__dirname,'src/js'),
      // 以前你可能这样引用 import { Nav } from '../../components'
      // 现在你可以这样引用 import { Nav } from 'app/components'

      style: path.resolve(__dirname,'src/styles')
      // 以前你可能这样引用 import '../../../styles/mixins.scss'
      // 现在你可以这样引用 import 'style/mixins.scss'

      // 注意：别名只能在.js文件中使用。
    }
  },

  plugins: [
    // new webpack.optimize.OccurrenceOrderPlugin(),
    // 和 json-loader 一样，OccurrenceOrderPlugin 在 webpack 2.0中默认添加！
    // webapck 会给编译好的代码片段一个id用来区分
    // 而这个插件会让webpack在id分配上优化并保持一致性。
    // 具体是的优化是：webpack就能够比对id的使用频率和分布来得出最短的id分配给使用频率高的模块

    new WebpackMd5Hash(),
    // Hash the files using MD5 so that their names change when the content changes.

    new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false
      }
    }),

    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    // 代码压缩
    // https://webpack.js.org/guides/migrating/#uglifyjsplugin-sourcemap

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
      __DEV__: false
    }),

    new ExtractTextPlugin('vendor.css'),

    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { discardComments: {removeAll: true } },
      canPrint: true
    }),
    // 很多库的内部，有process.NODE_ENV的判断语句，
    // 改为production。最直观的就是没有所有的debug相关的东西，体积会减少很多

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      // 指定入口文件(entry)哪个key需要提取，提取公用的，更新率低的部分。

      filename: 'vendor.js',
      // (Give the chunk a different name) 此项如果省略默认生成 vendor.js

      minChunks: Infinity,
      // (with more entries, this ensures that no other module
      //  goes into the vendor chunk)
    }),
    // https://webpack.js.org/plugins/commons-chunk-plugin/#components/sidebar/sidebar.jsx
    // https://webpack.js.org/guides/code-splitting-libraries/#implicit-common-vendor-chunk

    new HtmlWebpackPlugin({
      title: '开发模式',

      filename: 'index.html',
      // 文件名以及文件将要存放的位置

      favicon: 'favicon.ico',
      // favicon路径

      template: 'index.html',
      // html模板的路径

      inject: 'body',
      // js插入的位置，true/'head'  false/'body'

      hash: true,
      // 这样每次客户端页面就会根据这个hash来判断页面是否有必要刷新
      // 在项目后续过程中，经常需要做些改动更新什么的，一但有改动，客户端页面就会自动更新！

      minify: {
        removeComments: true,
        // 移除HTML中的注释

        collapseWhitespace: true,
        // 删除空白符与换行符

        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
    })
  ],
};
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343

推荐阅读更多精彩内容

  • webpack 从入门到工程实践
    GitChat技术杂谈 前言 本文较长，为了节省你的阅读时间，在文前列写作思路如下： 什么是 webpack，它要...
    萧玄辞阅读 12,671评论 7赞 110
  • webpack介绍、配置、使用
    版权声明：本文为博主原创文章，未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,028评论 0赞 21
  • webpack教程
    无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅，特此分享以备自己日后查看，也希望更多的人看到...
    小小字符阅读 8,140评论 7赞 35
  • 醉酒的灵魂
    今天观看“天津卫视″的《爱情保卫战》，里面女主人公小戚的酒量真是吓人，一气可以喝72瓶啤酒，2斤白酒，2斤洋酒，夸...
    山意阅读 556评论 0赞 0
  • 随感
    我想好好的生活，我想很认真的说，我不开心，我好难过，可是说着说着总是在自我安慰，自我排遣了，没有办法啊，你的人生...
    鼹鼠轩轩阅读 197评论 0赞 2