webpack的打包-多入口应用（1）

webpack的打包：

查阅webpack文档，在项目根目录下创建一个 webpack.config.js 文件，webpack 会自动使用它

下载webpack 和axios模块

• npm install webpack webpack-cli –dev
• npm install axios -S

src/one.js:

import axios from 'axios'
axios.create({
  baseURL: '0.0.0.0',
  timeout: 10000
})
复制代码

src/two.js:

import axios from 'axios'
axios.create({
  baseURL: '0.0.0.1',
  timeout: 10001
})
复制代码

webpack.config.js

const path  = require("path");
module.exports = {
  entry: {
    one: './src/one.js',
    two: './src/two.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].js"
  }
}
复制代码

分别会打包出两个文件到dist中

打包后的文件中查找自定义的，发现都在这个eval函数里，可以根据定义的参数对比两个文件发现是不同的

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_0__);\n\r\naxios__WEBPACK_IMPORTED_MODULE_0___default().create({\r\n  baseURL: '0.0.0.0',\r\n  timeout: 10000\r\n})\n\n//# sourceURL=webpack://multi-page-webpack/./src/one.js?");
复制代码

两个文件其实就一行代码的差异，像axios这种文件，都是第三方依赖，觉得还是有必要隔离起来，查阅文献发现有一个插件可以解决该问题，CommonsChunkPlugin可以用来在打包的时候提取公共js代码，立马尝试

const path = require("path");
const webpack = require("webpack");
module.exports = {
  entry: {
    one: "./src/one.js",
    two: "./src/two.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "common",
    }),
  ],
};
复制代码

为了执行方便，将命令配置在package.json中

"scripts": {
    "build": "webpack --config webpack.config.js"
  },
复制代码

最终如愿以偿将公共的文件成功提取了出来