webpack工程搭建

>>建立nodejs工程

新建文件夹，npm init 生成package.json

>>安装webpack 和 webpack-dev-server

npm install --save-dev webpack@3.8.1 注意4.x版本语法有些变化

npm install --save-dev webpack-dev-server@2.9.7 注意踩坑记录1

>>安装babel转码es6

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。

babel 6 与 bable-loader 7匹配，

另外解决promise等，用 babel-polyfill，bebel6对应版本为babel-polyfill 6，解决组件按需加载编译，用 babel-plugin-import

>>支持 react 开发

npm install --save-dev react react-dom 注意这里是本地安装，也可以用全局安装

安装其他可选插件：

html-webpack-plugin

clean-webpack-plugin

copy-webpack-plugin

>>配置webpack.config.js

踩坑记录

1：webpack是3.x版本的，webpack-dev-server是3.x的版本，这两个版本不兼容，可以把webpack-dev-server降到2.x版本

踩坑解决办法示例：TypeError: Cannot read property 'compile' of undefined #1334

解决思路： 优先使用 Google 引擎进行搜索关键词句, 比如 webpack Cannot read property 'compile' of undefined；看能否找到相应的问题。

如果不行，不妨换一种方式再搜索，譬如：site:stackoverflow.com webpack Cannot read property 'compile' of undefined，在具体某个网站下搜索；如果还是没能找见解决办法的话，可以在各种平台提问，比如 segmentfault。

额外补充： 对于 Google 这个工具还真是有必要先学，具体常用操作可参见：如何更好地运用 Chrome (Google)。倘若，不能够没有适用 Google 的环境，那么这里整理集结若干优质搜索引擎，堪称 Google 搜索优质替代品，可供参考。

package.json 示例：

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "antd": "^3.25.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-import": "^1.12.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "clean-webpack-plugin": "^1.0.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^3.2.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less-loader": "^5.0.0",
    "sass-loader": "^7.3.1",
    "style-loader": "^1.0.0",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "url-loader": "^2.1.0",
    "webpack": "^3.8.1",
    "webpack-bundle-analyzer": "^3.1.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  }
}

webpack.config.js 示例：

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
// const UglifyJsPlugin  = require('uglifyjs-webpack-plugin');

module.exports = {
  // context: path.resolve(__dirname), //webpack运行时的根目录，默认为当前目录

  // 配置寻找模块的规则
  resolve: {
    modules: [ // 寻找模块的根目录，array 类型，默认以 node_modules 为根目录
      path.resolve(__dirname),
      'node_modules'
    ],
    extensions: ['.js', '.jsx', '.json', '.css', '.less', '.scss'], // 当模块没有后缀名时，webpack尝试添加后查找文件，常用的放前面
    alias: { // 别名，用于替换import导入模块的路径，例如可在dev环境导入不压缩的包，prd环境导入压缩的包
      "react": "react/cjs/react.production.min.js", // 将import react替换为import "react.min.js"
      "react-dom": "react-dom/cjs/react-dom.production.min.js",
      // "LP": "xxx/lp.min.js", // 将"LP"替换为xxx/lp.min.js
      // 'only-module$': 'new-module'
      // 使用结尾符号 $ 后，只把 'only-module'结尾的路径 映射成 'new-module'，
      // 'module/path/file' 不会被映射成 'new-module/path/file'
    },
    enforceExtension: false, // 是否强制导入语句必须要写明文件后缀
  },

  // entry 表示入口文件，注意这里的路径拼上resolve.modules路径即尝试加载入口文件的完整路径
  // 类型可以是 string | object | array
  // entry: "src/js/entry.js", // 只有1个入口，入口只有1个文件，对应1个chunk出口文件，且命名为main
  // entry: ["src/js/entry1.js", "src/js/entry2.js"], // 只有1个入口，入口有2个文件，对应1个chunk出口文件，且命名为main
  entry: { // 有2个入口，对应2个chunk出口文件。entry为object时对应多个chunk出口文件，名称默认为key值。
    // 'vendor': ['babel-polyfill', 'isomorphic-fetch', 'prop-types', 'react', 'react-dom', 'react-redux', 'react-router-dom', 'redux', 'react-bootstrap'],
    'vendor': ['babel-polyfill', 'react', 'react-dom'],
    "index": "src/app/index.js"
  },
  // entry: ()=>{ // 可由函数动态生成entry
  //   return {
  //     a:"xxx",
  //     b:"yyy"
  //   }
  // }

  // resolveLoader: { // 告诉 webpack 如何寻找Loader源文件，可用于加载本地的Loader
  //   modules: ['node_modules'], // 去哪个目录寻找
  //   extensions: ['.js', 'json'], // 入口文件后缀
  //   mainFields: ['loader', 'main'] // 优先使用哪种类型的入口，可不配置
  // },

  externals: { // 告诉webpack要构建的代码中使用了哪些不用打包的模块（通常直接在模板html的script标签中引入），即直接使用JS运行环境提供的全局变量
    jquery: 'window.jQuery' // 将导入语句里的jqurey替换成全局变量 window.jQuery。例如代码中有 import $ from 'jquery' 会被正确的替换
  }, // 一般代码中也不会用模块引入的语法引入本身不打包的模块，因此这一项也可以不配置

  // 如何输出结果：在 Webpack 经过一系列处理后，如何输出最终想要的代码。
  output: {
    // 输出文件存放的目录，必须是 string 类型的绝对路径。
    path: path.resolve(__dirname, 'dist'),
    // 引用资源的路径 URL 前缀，拼上entry的路径即为资源访问路径。
    // publicPath: 'https://cdn.example.com/', // 放到 CDN 上去，html中引入js时使用https://cdn.example.com/xxx.js
    // 通常本地调试和发布到线上时访问路径不同，可以根据参数化选择：
    // publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath

    // 输出文件的名称
    // filename: 'bundle.js', // 完整的名称
    // filename: '[name].js', // 当配置了多个 entry 时，通过名称模版为不同的 entry 生成不同的文件名称
    filename: '[name].[chunkHash:8].js', // 根据文件内容 hash 值取8位生成文件名称，用于浏览器长时间缓存文件

    // 导出库的名称，string 类型
    // 不填它时，默认输出格式是匿名的立即执行函数
    // library: 'MyLibrary',

    // 导出库的类型，枚举类型，默认是 var
    // 可以是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ，
    // libraryTarget: 'umd', 

    // 附加 Chunk 的文件名称，用于指定无入口、动态加载、webpack运行过程中生成的chunk的名称，通常也可以在具体的plugin中去配置
    // chunkFilename: '[id].js',
    // chunkFilename: '[chunkhash].js'
  },

  // 配置模块相关
  module: {
    rules: [ // 配置 Loader
      {
        test: /\.jsx?$/, // 正则匹配命中要使用该 Loader 的文件，可以为字符串或正则，或者数组类型
        // include: [ // 匹配范围包含，即只会命中这里面的文件
        //   path.resolve(__dirname, 'src')
        // ],
        exclude: /node_modules/, // 匹配范围不包含，即排除这里面的文件
        use: [{ // 使用哪些 Loader，有多个时从后往前执行，可以通过options传一些参数
          loader: "babel-loader"
        }],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 不传参数时可以简写
        // 注：style-loader作用是将css编译到js中，然后运行时插入DOM节点的style属性，可能导致js代码较大，且css复用性不够。可用ExtractTextWebpackPlugin优化。
        // use: ExtractTextPlugin.extract({
        //   fallback: "style-loader", // 编译后用什么loader来提取css文件并引入到html
        //   use: "css-loader"
        // })
      },
      {
        test: /\.less$/,
        use:['style-loader','css-loader', 'less-loader']
      },
      {
        test: /\.scss$/,
        use:['style-loader','css-loader', 'sass-loader']
      },
      {
        // 对小图片或字体文件直接编码为base64提高加载速度，当图片超过限制时直接使用file-loader拷贝
        test: /\.(png|jpe?g|gif|svg|eot|woff2?|ttf|pdf)$/,
        loader: 'url-loader',
        include: [path.resolve(__dirname, 'src')],
        options: {
          limit: 10000, // 小于10kb的才编码为base64，建议10kb量级的小文件才编码
          name: 'media/[name].[hash:7].[ext]'
          // 另外还可以配置publicPath等参数，参见文末说明
        }
      },
    ],
    noParse: [ // 不用解析和处理的模块，如jQuery等非模块化的库，被忽略的模块不能包含import require define等模块化语句
      /jquery|chartjs/  // 用正则匹配
    ],
    // noParse: (path) => {
    //   return /jquery|chartjs/.test(path);
    // }
  },

  plugins: [
    new CleanWebpackPlugin(['dist']),
    new CopyWebpackPlugin([{
      from: __dirname+'/src/resource', // 静态资源目录地址
      to: __dirname+'/dist/resource',
      ignore: ["test.html"]
    }]),
    // new ExtractTextPlugin({ // 提取js的css到文件，参见文末说明
    //   filename: 'css/style.[contenthash:16].css',
    // }),
    new webpack.optimize.CommonsChunkPlugin({ // 从vendor chunk中提取第三方公共模块，然后从中提取webpack运行文件到runtime
      name: ['vendor','runtime'],
      filename: '[name].[hash:7].js',
      minChunks: 2 // 公共模块被引用几次时被提取出来
    }),
    // new webpack.optimize.CommonsChunkPlugin({ // 提取自定义公共模块
    //     name: 'common',
    //     filename: '[name].[hash:7].js',
    //     chunks: ['first','second']//从first和second chunk中抽取commons chunk
    // }),
    // new UglifyJsPlugin(),
    new HtmlWebpackPlugin({
      title: "首页", // 指定页面标题
      favicon: "", // 指定页面图标
      template: __dirname + "/src/template/index.html", // html模板文件路径
      inject: true, // true|head|body|false，当传入 true或者 body时所有js模块将被放置在body元素的底部，head时则会放在head元素内
      // minify:{    // 压缩HTML文件
      //   removeComments:true,    // 移除HTML中的注释
      //   collapseWhitespace:true    // 删除空白符与换行符
      // },
      filename: "index.html", // 输出html文件路径
      chunks: [ // 向html script标签中添加哪些chunk
        "runtime", // webpack运行文件要排在最前面优先加载
        "vendor",
        "index"
      ],
      // excludeChunks: [ // 被排除的模块
      //   "main"
      // ]
      chunksSortMode: 'manual', // 设置chunk插入到html的script标签的顺序， none|auto|dependency|manual|{function} 默认为'auto，常用manual根据chunks的位置手动排序
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist"), //本地服务器所加载的页面所在的目录
    publicPath: "/dist/", // 和output.publicPath作用一样，本地调试用，会覆盖output.publicPath的值，确保以/开头以/结尾
    inline: true, // 实时刷新
    // hot: true, // 是否开启模块热替换功能（不重新加载整个网页的情况下刷新模块），默认关闭
    port: 9000, // 端口改为9000
    compress: true, // 是否开启 gzip 压缩
    https: false, // 是否开启 HTTPS 模式
    // open:true // 自动打开浏览器
    // headers: { // response中注入一些响应头
    //   'X-foo': '112233'
    // },
    // historyApiFallback: true, // 404时定向跳转，一应用在HTML5 History API 的单页应用，比如访问不到路由时跳转到index.html
    // 还可以配置proxy 实现跨域请求，参见文末
  },
  // http://localhost:9000/webpack-dev-server 可以查看运行时dev-server在内存中生成的目录结构

  // 其他配置
  devtool: 'source-map', // 配置 source-map 类型，方便调试时查看源码
  profile: false, // 是否捕捉 Webpack 构建的性能信息，用于分析什么原因导致构建性能不佳
  cache: true, // 是否启用缓存提升构建速度
  watch: true, // 是否开启监听模式，在文件变化时自动重新编译（默认否，当使用devServer时默认开启）
  watchOptions: { // 监听模式选项
    // 不监听的文件或文件夹，支持正则匹配。默认为空
    ignored: /node_modules/,
    // 监听到变化发生后会等待多长时间再去执行编译，防止文件更新太快导致重新编译频率太高，默认为300ms
    aggregateTimeout: 300,
    // 检测文件是否发生变化的间隔时长，默认每隔1000毫秒询问一次
    poll: 1000
  },

  // 输出文件性能检查配置
  performance: {
    hints: 'warning', // 有性能问题时输出警告
    hints: 'error', // 有性能问题时输出错误
    hints: false, // 关闭性能检查
    maxAssetSize: 200000, // 最大文件大小 (单位 bytes)
    maxEntrypointSize: 400000, // 最大入口文件大小 (单位 bytes)
    assetFilter: function(assetFilename) { // 过滤要检查的文件
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

  stats: { // 控制台输出日志控制
    assets: true,
    colors: true,
    errors: true,
    errorDetails: true,
    hash: true,
  }

};

// node中的路径
// __dirname: 总是返回被执行的 js 所在文件夹的绝对路径
// __filename: 总是返回被执行的 js 的绝对路径
// process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径

/*
devServer proxy 实现跨域

有时候我们使用webpack在本地启动服务器的时候，由于我们使用的访问的域名是 http://localhost:8081 这样的，但是我们服务端的接口是其他的，
那么就存在域名或端口号跨域的情况下，但是很幸运的是 devServer有一个叫proxy配置项，可以通过该配置来解决跨域的问题，那是因为 dev-server 使用了 http-proxy-middleware 包(了解该包的更多用法 )。
假如现在我们本地访问的域名是 http://localhost:8081, 但是我现在调用的是百度页面中的一个接口，该接口地址是：http://news.baidu.com/widget?ajax=json&id=ad。现在我们只需要在devServer中的proxy的配置就可以了：
如下配置：
proxy: {
  '/api': {
    target: 'http://news.baidu.com', // 目标接口的域名
    // secure: true,  // https 的时候 使用该参数
    changeOrigin: true,  // 是否跨域
    pathRewrite: {
      '^/api' : ''  // 重写路径
    }
  }
}
然后我们在main.js里面编写如下代码：
import axios from 'axios';
axios.get('/api/widget?ajax=json&id=ad').then(res => {
  console.log(res);
});
在这里请求我使用 axios 插件，其实和jquery是一个意思的。为了方便就用了这个。
下面我们来理解下上面配置的含义：
1. 首先是百度的接口地址是这样的：http://news.baidu.com/widget?ajax=json&id=ad;
2. proxy 的配置项 '/api' 和 target: 'http://news.baidu.com' 的含义是，匹配请求中 /api 含有这样的域名重定向 到 'http://news.baidu.com'来。
因此我在接口地址上 添加了前缀 '/api', 如： axios.get('/api/widget?ajax=json&id=ad'); 因此会自动补充前缀，也就是说，url: '/api/widget?ajax=json&id=ad' 等价
于 url: 'http://news.baidu.com/api/widget?ajax=json&id=ad'.
3. changeOrigin: true/false 还参数值是一个布尔值，含义是 是否需要跨域。
4. secure: true, 如果是https请求就需要改参数配置，需要ssl证书吧。
5. pathRewrite: {'^/api' : ''}的含义是重写url地址，把url的地址里面含有 '/api' 这样的 替换成 '',
因此接口地址就变成了 http://news.baidu.com/widget?ajax=json&id=ad； 因此就可以请求得到了，最后就返回
接口数据了。
*/

/* https://segmentfault.com/a/1190000018987483?utm_source=tag-newest
url-loader 会将引入的图片（还有字体、音视频等）编码，生成dataURl并将其打包到文件中，引入这个dataURL就能访问。如果图片较大，编码会消耗性能。
因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的内部调用file-loader进行copy。
接下来摘取几个重要的属性做说明

outputPath
该属性指明我们最终导出的文件路径
最终导出的文件路径 === output.path + url-loader.outputPath + url-loader.name

publicPath（常用于生成环境）
该属性指明我们最终引用的文件路径（打包生成的index.html文件里面引用资源的前缀）
最终引用的文件路径前缀 === output.publicPath + url-loader.publicPath + url-loader.name

name
该属性指明文件的最终名称。
同样的，我们可以直接把outputPath的内容写到name中，一样可以生成对应的路径
经过上面的说明，我们得出结论，最终的静态文件路径（图片，音频，视频，字体等）=== output.publicPath + url-loader.publicPath + output.path + url-loader.outputPath + url-loader.name

我们在本地开发的时候都是localhost:8080/下面的根目录，所以当图片生成如下的绝对地址是不会出问题的，可是同样的webpack配置放到生成环境上就不一定了。
因为生成环境大部分的前端静态文件都不是在根目录啊，有可能就是这样的目录结构
www/
 +folder/
   +static/
     +css/
     +img/
     +js/
   +index.html
这样你开发环境的绝对路径放到服务器上面自然就404了，所以要不然用相对路径，要不然就统一写死绝对路径（针对不同环境添加不同的publicPath）
（同样道理，解释为什么css里面的背景图路径404，但是这个解决起来需要用到extract-text-webpack-plugin或者mini-css-extract-plugin这个插件，前者用于webpack4以下版本，后者是4以上版本，配置options里面的publicPath）

css 提取插件，`extract-text-webpack-plugin` 插件 或者 `mini-css-extract-plugin` 的 loader也都提供了publicPath，用来复写提取出来的css文件中的资源的引入路径
*/

模板html示例：

<!DOCTYPE html>
<head>
    <title><%=htmlWebpackPlugin.options.title %></title>
    <meta charset="utf-8" />
    <style>
        /* 垂直居中显示 */
        .center-in-center{
            position: absolute;
            margin: 10px;
            padding: 10px;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="root" >
    </div>
</body>
</html>

解释下版本号：

1.15.2对应就是MAJOR,MINOR.PATCH：1是marjor version；15是minor version；2是patch version。
MAJOR：这个版本号变化了表示有了一个不可以和上个版本兼容的大更改。
MINOR：这个版本号变化了表示有了增加了新的功能，并且可以向后兼容。
PATCH：这个版本号变化了表示修复了bug，并且可以向后兼容。

当我们使用最新的Node运行‘npm instal --save xxx'，的时候，他会优先考虑使用插入符号（^）而不是波浪符号（~）了。

波浪符号（~）：他会更新到当前minor version（也就是中间的那位数字）中最新的版本。放到我们的例子中就是：body-parser:~1.15.2，这个库会去匹配更新到1.15.x的最新版本，如果出了一个新的版本为1.16.0，则不会自动升级。波浪符号是曾经npm安装时候的默认符号，现在已经变为了插入符号。

插入符号（^）：这个符号就显得非常的灵活了，他将会把当前库的版本更新到当前major version（也就是第一位数字）中最新的版本。放到我们的例子中就是：bluebird:^3.3.4，这个库会去匹配3.x.x中最新的版本，但是他不会自动更新到4.0.0。

因为major version变化表示可能会影响之前版本的兼容性，所以无论是波浪符号还是插入符号都不会自动去修改major version，因为这可能导致程序crush，可能需要手动修改代码。

const path = require("path");

const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const CopyWebpackPlugin = require("copy-webpack-plugin");

const CleanWebpackPlugin = require("clean-webpack-plugin");

// const ExtractTextPlugin = require("extract-text-webpack-plugin");

// const UglifyJsPlugin  = require('uglifyjs-webpack-plugin');

module.exports = {

  // context: path.resolve(__dirname), //webpack运行时的根目录，默认为当前目录

  // 配置寻找模块的规则

  resolve: {

    modules: [ // 寻找模块的根目录，array 类型，默认以 node_modules 为根目录

      path.resolve(__dirname),

      'node_modules'

    ],

    extensions: ['.js', '.jsx', '.json', '.css', '.less', '.scss'], // 当模块没有后缀名时，webpack尝试添加后查找文件，常用的放前面

    alias: { // 别名，用于替换import导入模块的路径，例如可在dev环境导入不压缩的包，prd环境导入压缩的包

      "react": "react/cjs/react.production.min.js", // 将import react替换为import "react.min.js"

      "react-dom": "react-dom/cjs/react-dom.production.min.js",

      // "LP": "xxx/lp.min.js", // 将"LP"替换为xxx/lp.min.js

      // 'only-module$': 'new-module'

      // 使用结尾符号 $ 后，只把 'only-module'结尾的路径 映射成 'new-module'，

      // 'module/path/file' 不会被映射成 'new-module/path/file'

    },

    enforceExtension: false, // 是否强制导入语句必须要写明文件后缀

  },

  // entry 表示入口文件，注意这里的路径拼上resolve.modules路径即尝试加载入口文件的完整路径

  // 类型可以是 string | object | array   

  // entry: "src/js/entry.js", // 只有1个入口，入口只有1个文件，对应1个chunk出口文件，且命名为main

  // entry: ["src/js/entry1.js", "src/js/entry2.js"], // 只有1个入口，入口有2个文件，对应1个chunk出口文件，且命名为main

  entry: { // 有2个入口，对应2个chunk出口文件。entry为object时对应多个chunk出口文件，名称默认为key值。

    // 'vendor': ['babel-polyfill', 'isomorphic-fetch', 'prop-types', 'react', 'react-dom', 'react-redux', 'react-router-dom', 'redux', 'react-bootstrap'],

    'vendor': ['babel-polyfill', 'react', 'react-dom'],

    "index": "src/app/index.js"

  },

  // entry: ()=>{ // 可由函数动态生成entry

  //   return {

  //     a:"xxx",

  //     b:"yyy"

  //   }

  // }

  // resolveLoader: { // 告诉 webpack 如何寻找Loader源文件，可用于加载本地的Loader

  //   modules: ['node_modules'], // 去哪个目录寻找

  //   extensions: ['.js', 'json'], // 入口文件后缀

  //   mainFields: ['loader', 'main'] // 优先使用哪种类型的入口，可不配置

  // },

  externals: { // 告诉webpack要构建的代码中使用了哪些不用打包的模块（通常直接在模板html的script标签中引入），即直接使用JS运行环境提供的全局变量

    jquery: 'window.jQuery' // 将导入语句里的jqurey替换成全局变量 window.jQuery。例如代码中有 import $ from 'jquery' 会被正确的替换

  }, // 一般代码中也不会用模块引入的语法引入本身不打包的模块，因此这一项也可以不配置

  // 如何输出结果：在 Webpack 经过一系列处理后，如何输出最终想要的代码。

  output: {

    // 输出文件存放的目录，必须是 string 类型的绝对路径。

    path: path.resolve(__dirname, 'dist'),

    // 引用资源的路径 URL 前缀，拼上entry的路径即为资源访问路径。

    // publicPath: 'https://cdn.example.com/', // 放到 CDN 上去，html中引入js时使用https://cdn.example.com/xxx.js

    // 通常本地调试和发布到线上时访问路径不同，可以根据参数化选择：

    // publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath

    // 输出文件的名称

    // filename: 'bundle.js', // 完整的名称

    // filename: '[name].js', // 当配置了多个 entry 时，通过名称模版为不同的 entry 生成不同的文件名称

    filename: '[name].[chunkHash:8].js', // 根据文件内容 hash 值取8位生成文件名称，用于浏览器长时间缓存文件

    // 导出库的名称，string 类型

    // 不填它时，默认输出格式是匿名的立即执行函数

    // library: 'MyLibrary',

    // 导出库的类型，枚举类型，默认是 var

    // 可以是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ，

    // libraryTarget: 'umd', 

    // 附加 Chunk 的文件名称，用于指定无入口、动态加载、webpack运行过程中生成的chunk的名称，通常也可以在具体的plugin中去配置

    // chunkFilename: '[id].js',

    // chunkFilename: '[chunkhash].js'

  },

  // 配置模块相关

  module: {

    rules: [ // 配置 Loader

      {

        test: /\.jsx?$/, // 正则匹配命中要使用该 Loader 的文件，可以为字符串或正则，或者数组类型

        // include: [ // 匹配范围包含，即只会命中这里面的文件

        //   path.resolve(__dirname, 'src')

        // ],

        exclude: /node_modules/, // 匹配范围不包含，即排除这里面的文件

        use: [{ // 使用哪些 Loader，有多个时从后往前执行，可以通过options传一些参数

          loader: "babel-loader"

        }],

      },

      {

        test: /\.css$/,

        use: ['style-loader', 'css-loader'] // 不传参数时可以简写

        // 注：style-loader作用是将css编译到js中，然后运行时插入DOM节点的style属性，可能导致js代码较大，且css复用性不够。可用ExtractTextWebpackPlugin优化。

        // use: ExtractTextPlugin.extract({

        //   fallback: "style-loader", // 编译后用什么loader来提取css文件并引入到html

        //   use: "css-loader"

        // })

      },

      {

        test: /\.less$/,

        use:['style-loader','css-loader', 'less-loader']

      },

      {

        test: /\.scss$/,

        use:['style-loader','css-loader', 'sass-loader']

      },

      {

        // 对小图片或字体文件直接编码为base64提高加载速度，当图片超过限制时直接使用file-loader拷贝

        test: /\.(png|jpe?g|gif|svg|eot|woff2?|ttf|pdf)$/,

        loader: 'url-loader',

        include: [path.resolve(__dirname, 'src')], 

        options: {

          limit: , // 小于10kb的才编码为base64，建议10kb量级的小文件才编码

          name: 'media/[name].[hash:7].[ext]'

          // 另外还可以配置publicPath等参数，参见文末说明

        }

      },

    ],

    noParse: [ // 不用解析和处理的模块，如jQuery等非模块化的库，被忽略的模块不能包含import require define等模块化语句

      /jquery|chartjs/  // 用正则匹配

    ],

    // noParse: (path) => {

    //   return /jquery|chartjs/.test(path);

    // }

  },

  plugins: [

    new CleanWebpackPlugin(['dist']),

    new CopyWebpackPlugin([{

      from: __dirname+'/src/resource', // 静态资源目录地址

      to: __dirname+'/dist/resource',

      ignore: ["test.html"]

    }]),

    // new ExtractTextPlugin({ // 提取js的css到文件，参见文末说明

    //   filename: 'css/style.[contenthash:16].css',

    // }),

    new webpack.optimize.CommonsChunkPlugin({ // 从vendor chunk中提取第三方公共模块，然后从中提取webpack运行文件到runtime

      name: ['vendor','runtime'],

      filename: '[name].[hash:7].js',

      minChunks:  // 公共模块被引用几次时被提取出来

    }),

    // new webpack.optimize.CommonsChunkPlugin({ // 提取自定义公共模块

    //     name: 'common',

    //     filename: '[name].[hash:7].js',

    //     chunks: ['first','second']//从first和second chunk中抽取commons chunk

    // }),

    // new UglifyJsPlugin(),

    new HtmlWebpackPlugin({

      title: "首页", // 指定页面标题

      favicon: "", // 指定页面图标

      template: __dirname + "/src/template/index.html", // html模板文件路径

      inject: true, // true|head|body|false，当传入 true或者 body时所有js模块将被放置在body元素的底部，head时则会放在head元素内

      // minify:{    // 压缩HTML文件

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

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

      // },

      filename: "index.html", // 输出html文件路径

      chunks: [ // 向html script标签中添加哪些chunk

        "runtime", // webpack运行文件要排在最前面优先加载

        "vendor",

        "index"        

      ],

      // excludeChunks: [ // 被排除的模块

      //   "main"

      // ]

      chunksSortMode: 'manual', // 设置chunk插入到html的script标签的顺序， none|auto|dependency|manual|{function} 默认为'auto，常用manual根据chunks的位置手动排序

    }),

  ],

  devServer: {

    contentBase: path.join(__dirname, "dist"), //本地服务器所加载的页面所在的目录

    publicPath: "/dist/", // 和output.publicPath作用一样，本地调试用，会覆盖output.publicPath的值，确保以/开头以/结尾

    inline: true, // 实时刷新

    // hot: true, // 是否开启模块热替换功能（不重新加载整个网页的情况下刷新模块），默认关闭

    port: , // 端口改为9000

    compress: true, // 是否开启 gzip 压缩

    https: false, // 是否开启 HTTPS 模式

    // open:true // 自动打开浏览器

    // headers: { // response中注入一些响应头

    //   'X-foo': '112233'

    // },

    // historyApiFallback: true, // 404时定向跳转，一应用在HTML5 History API 的单页应用，比如访问不到路由时跳转到index.html

    // 还可以配置proxy 实现跨域请求，参见文末

  },

  // http://localhost:9000/webpack-dev-server 可以查看运行时dev-server在内存中生成的目录结构

  // 其他配置

  devtool: 'source-map', // 配置 source-map 类型，方便调试时查看源码

  profile: false, // 是否捕捉 Webpack 构建的性能信息，用于分析什么原因导致构建性能不佳

  cache: false, // 是否启用缓存提升构建速度

  watch: true, // 是否开启监听模式，在文件变化时自动重新编译（默认否，当使用devServer时默认开启）

  watchOptions: { // 监听模式选项

    // 不监听的文件或文件夹，支持正则匹配。默认为空

    ignored: /node_modules/,

    // 监听到变化发生后会等待多长时间再去执行编译，防止文件更新太快导致重新编译频率太高，默认为300ms 

    aggregateTimeout: ,

    // 检测文件是否发生变化的间隔时长，默认每隔1000毫秒询问一次

    poll: 

  },

  

  // 输出文件性能检查配置

  performance: { 

    hints: 'warning', // 有性能问题时输出警告

    hints: 'error', // 有性能问题时输出错误

    hints: false, // 关闭性能检查

    maxAssetSize: , // 最大文件大小 (单位 bytes)

    maxEntrypointSize: , // 最大入口文件大小 (单位 bytes)

    assetFilter: function(assetFilename) { // 过滤要检查的文件

      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');

    }

  },

  stats: { // 控制台输出日志控制

    assets: true,

    colors: true,

    errors: true,

    errorDetails: true,

    hash: true,

  }

  

};

// node中的路径

// __dirname: 总是返回被执行的 js 所在文件夹的绝对路径

// __filename: 总是返回被执行的 js 的绝对路径

// process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径

/*

devServer proxy 实现跨域

有时候我们使用webpack在本地启动服务器的时候，由于我们使用的访问的域名是 http://localhost:8081 这样的，但是我们服务端的接口是其他的，

那么就存在域名或端口号跨域的情况下，但是很幸运的是 devServer有一个叫proxy配置项，可以通过该配置来解决跨域的问题，那是因为 dev-server 使用了 http-proxy-middleware 包(了解该包的更多用法 )。

假如现在我们本地访问的域名是 http://localhost:8081, 但是我现在调用的是百度页面中的一个接口，该接口地址是：http://news.baidu.com/widget?ajax=json&id=ad。现在我们只需要在devServer中的proxy的配置就可以了：

如下配置：

proxy: {

  '/api': {

    target: 'http://news.baidu.com', // 目标接口的域名

    // secure: true,  // https 的时候 使用该参数

    changeOrigin: true,  // 是否跨域

    pathRewrite: {

      '^/api' : ''  // 重写路径

    }

  }

}

然后我们在main.js里面编写如下代码：

import axios from 'axios';

axios.get('/api/widget?ajax=json&id=ad').then(res => {

  console.log(res);

});

在这里请求我使用 axios 插件，其实和jquery是一个意思的。为了方便就用了这个。

下面我们来理解下上面配置的含义：

1. 首先是百度的接口地址是这样的：http://news.baidu.com/widget?ajax=json&id=ad;

2. proxy 的配置项 '/api' 和 target: 'http://news.baidu.com' 的含义是，匹配请求中 /api 含有这样的域名重定向 到 'http://news.baidu.com'来。

因此我在接口地址上 添加了前缀 '/api', 如： axios.get('/api/widget?ajax=json&id=ad'); 因此会自动补充前缀，也就是说，url: '/api/widget?ajax=json&id=ad' 等价

于 url: 'http://news.baidu.com/api/widget?ajax=json&id=ad'.

3. changeOrigin: true/false 还参数值是一个布尔值，含义是 是否需要跨域。

4. secure: true, 如果是https请求就需要改参数配置，需要ssl证书吧。

5. pathRewrite: {'^/api' : ''}的含义是重写url地址，把url的地址里面含有 '/api' 这样的 替换成 '', 

因此接口地址就变成了 http://news.baidu.com/widget?ajax=json&id=ad； 因此就可以请求得到了，最后就返回

接口数据了。

*/

/* https://segmentfault.com/a/1190000018987483?utm_source=tag-newest

url-loader 会将引入的图片（还有字体、音视频等）编码，生成dataURl并将其打包到文件中，引入这个dataURL就能访问。如果图片较大，编码会消耗性能。

因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的内部调用file-loader进行copy。

接下来摘取几个重要的属性做说明

outputPath

该属性指明我们最终导出的文件路径

最终导出的文件路径 === output.path + url-loader.outputPath + url-loader.name

publicPath（常用于生成环境）

该属性指明我们最终引用的文件路径（打包生成的index.html文件里面引用资源的前缀）

最终引用的文件路径前缀 === output.publicPath + url-loader.publicPath + url-loader.name

name

该属性指明文件的最终名称。

同样的，我们可以直接把outputPath的内容写到name中，一样可以生成对应的路径

经过上面的说明，我们得出结论，最终的静态文件路径（图片，音频，视频，字体等）=== output.publicPath + url-loader.publicPath + output.path + url-loader.outputPath + url-loader.name

我们在本地开发的时候都是localhost:8080/下面的根目录，所以当图片生成如下的绝对地址是不会出问题的，可是同样的webpack配置放到生成环境上就不一定了。

因为生成环境大部分的前端静态文件都不是在根目录啊，有可能就是这样的目录结构

www/

 +folder/

   +static/

     +css/

     +img/

     +js/

   +index.html

这样你开发环境的绝对路径放到服务器上面自然就404了，所以要不然用相对路径，要不然就统一写死绝对路径（针对不同环境添加不同的publicPath）

（同样道理，解释为什么css里面的背景图路径404，但是这个解决起来需要用到extract-text-webpack-plugin或者mini-css-extract-plugin这个插件，前者用于webpack4以下版本，后者是4以上版本，配置options里面的publicPath）

css 提取插件，`extract-text-webpack-plugin` 插件 或者 `mini-css-extract-plugin` 的 loader也都提供了publicPath，用来复写提取出来的css文件中的资源的引入路径

*/