webpack常用配置总览(小结)

module.exports = {
  // __dirname值为所在文件的目录，context默认为执行webpack命令所在的目录
  context: path.resolve(__dirname, 'app'),
  // 必填项，编译入口，webpack启动会从配置文件开始解析,如下三种(还有一种动态加载entry的方式就是给entry传入一个函数，这个在项目比较大，页面很多的情况下可以优化编译时间)
  entry: './app/entry', // 只有一个入口，入口只有一个文件
  entry: ['./app/entry1', './app/entry2'], // 只有一个入口，入口有两个文件
    // 两个入口
  entry: {
    entry1: './app/entry1',
    entry2: './app/entry2'
  },
  // 输出文件配置
  output: {
    // 输出文件存放的目录，必须是string类型的绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 输出文件的名称
    filename: 'bundle.js',
    filename: '[name].js', // 配置了多个入口entry是[name]的值会被入口的key值替换，此处输出文件会输出的文件名为entry1.js和entry2.js
    filename: [chunkhash].js, // 根据chunk的内容的Hash值生成文件的名称，其他只还有id，hash，hash和chunkhash后面可以使用:number来取值，默认为20位，比如[name]@[chunkhash:12].js,
    // 文件发布到线上的资源的URL前缀，一般用于描述js和css位置，举个例子，打包项目时会导出一些html,那么html里边注入的script和link的地址就是通过这里配置的
    publicPath: "https://cdn.example.com/assets/", // CDN（总是 HTTPS 协议）
    publicPath: "//cdn.example.com/assets/", // CDN (协议相同)
    publicPath: "/assets/", // 相对于服务(server-relative)
    publicPath: "assets/", // 相对于 HTML 页面
    publicPath: "../assets/", // 相对于 HTML 页面
    publicPath: "", // 相对于 HTML 页面（目录相同）
    // 当需要构建的项目可以被其他模块导入使用，会用到libraryTarget和library
    library: 'xxx', // 配置导出库的名称，但是和libraryTarget有关，如果是commonjs2默认导出这个名字就没啥用
    // 从webpack3.1.0开始，可以为每个target起不同的名称
    library: {
      root: "MyLibrary",
      amd: "my-library",
      commonjs: "my-common-library"
    },
    libraryTarget: 'umd', // 导出库的类型，枚举值: umd、commonjs2、commonjs，amd、this、var(默认)、assign、window、global、jsonp(区别查看补充2)
    // 需要单独导出的子模块，这样可以直接在引用的时候使用子模块，默认的时候是_entry_return_
    libraryExport: 'default', // __entry_return_.default
    libraryExport: 'MyModule', // __entry_return_.MyModule
    libraryExport: ['MyModule', 'MySubModule '], // 使用数组代表到指定模块的取值路径 __entry_return_.MyModule.MySubModule
    // 配置无入口的chunk在输出时的文件名称，但仅用于在运行过程中生成的Chunk在输出时的文件名称，这个应该一般和插件的导出有关，支持和filename一样的内置变量
    chunkFilename: '[id].js',
    // 是否包含文件依赖相关的注释信息，不懂？请看补充3，在mode为development的是默认为true
    pathinfo: true,
    // JSONP异步加载chunk，或者拼接多个初始chunk(CommonsChunkPlugin,AggressiveSplittingPlugin)
    jsonpFunction: 'myWebpackJsonp',
    // 此选项会向应盘写入一个输出文件，只在devtool启动了sourceMap选项时采用，默认为`[file].map`,除了和filename一样外还可以使用[file]
    sourceMapFilename: '[file].map',
    // 浏览器开发者工具里显示的源码模块名称，此选项仅在 「devtool 使用了需要模块名称的选项」时使用，使用source-map调试，关联模块鼠标移动到上面的时候显示的地址(截不到图啊，醉了)，默认这个值是有的，一般不需要关心
    devtoolModuleFilenameTemplate: 'testtest://[resource-path]'
  },
  // 配置模块相关
  module: {
    rules: [ // 配置loaders
      {
        test: /\.jsx"color: #ff0000">补充

补充1.chunkname是什么
就是打包后代码块的名字
补充2.补充不同的库导出方式的区别
var


var MyLibrary = _entry_return_;
// 在一个单独的 script……
MyLibrary.doSomething();


assign 暴露到全局变量中，不要用this 分配给this，感觉会放在全局的this上,官网说取决于你
window 将模块放在window上


window["MyLibrary"] = _entry_return_;

window.MyLibrary.doSomething();


global 调动方式使用global['myLibrary']
commonjs
commonjs2


说一下这两种区别，其实这说到了exports和module.exports的区别，exports是module.exports的一个引用


  module.exports = {};
  exports = module.exports;
  exports['aaaa'] = 1; // 这样是可以的，在module.exports上加了一个属性
  exports = 2; // 会导致exports脱离了对module.exports的引用
  modules.exports = 2 // 这样 exports的至最后就是2


那么其实commonjs的规定就是使用exports进行导出，而我们经常使用module.exports导出，webpack此处的方式其实就是选择到底是用exports导出还是module.exports导出，区别在于

如果选择commonjs


  // webpack输出为
  exports['LibraryName'] = _entry_return_;
  // 使用库的方法为
  require('library-name-in-npm')['LibraryName'].doSomething();
  // 原因其实就是这么导出最后其实是 
  // modules.exports = { [LibraryName]: _entry_return_ }


如果选择commonjs2


  // webpack输出为
  module.exports = _entry_return_;
  // 使用库的方法为
  require('library-name-in-npm').doSomething();


amd


// webpack输出
define("MyLibrary", [], function() {
  return _entry_return_; // 此模块返回值，是入口 chunk 返回的值
});
// 使用
require(['MyLibrary'], function(MyLibrary) {
  // 使用 library 做一些事……
});


umd 将你的模块暴露为所有模块定义下都可运行的方式


(function webpackUniversalModuleDefinition(root, factory) {
 if(typeof exports === 'object' && typeof module === 'object')
   module.exports = factory();
 else if(typeof define === 'function' && define.amd)
   define([], factory);
 else if(typeof exports === 'object')
   exports["MyLibrary"] = factory();
 else
   root["MyLibrary"] = factory();
 })(typeof self !== 'undefined' "htmlcode">

MyLibrary(_entry_return_);


补充3.pathinfo到底是哪些玩意

补充4.plugins和loader什么区别？
我的理解是
loader使用来识别出特定文件，并转换文件内容，方便webpack使用，比如css文件要解析，需要将其转换成js代码放到js中，才能被后续处理(当然可以省略)，然后加入最后输出的js当中

plugin是帮助webpack做一些额外的工作，补充一些webpack本身没有实现的功能，有种打补丁的意思，更专注于打包、编译、输出js文件等操作以及在某些阶段要额外做的一些操作，比如html插件将其链接地址插入html
补充5. 关于mainFields的解释
有一些第三方模块会针对不同的环境提供几份代码，例如分别提供了ES5和ES6两份代码，在package.json中代码如下：


{
  "jsnext:main": "es/index.js", // 采用es6的入口文件
  "main": "lib/index.js", // 采用es5语法的代码入口文件
}


那么webpack会根据mainFields数组里的顺序,逐步找到文件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。