核心部分：

  • entry
  • output
  • mode：
  • loader：
  • plugin：

    启动配置修改package.json

    1. "scripts":{
    2. "start": "webpack serve",
    3. "build": "webpack"
    4. }

    编译后内容

    在src目录下，创建index.js和title.js。index作为入口文件。 ```javascript // index.js const title = require(“./title”); console.log(title);

// title.js require(“lodash”)

exports.name = “hello”; module.exports = “titles”;

  1. 经过webpack编译后
  2. ```javascript
  3. // webpack 编译后，外层一个自执行函数
  4. (() => {
  5.   var modules = {
  6.     // 函数3个参数，后2个可省略，如果使用到才会显示
  7.     // exports 对应着在module文件中需要使用exports.xxx 这样导出
  8.     // __webpack_require__ 对应着使用了require/import这样导入文件
  9.     "./src/title.js": (module, exports, __webpack_require__) => {
  10.       __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");
  12.       exports.name = "hello";
  13.       module.exports = "titles";
  14.     },
  15.   };
  17.   var cache = {}; // 定义缓存，如果缓存有值，直接使用缓存
  18.   function __webpack_require__(moduleId) {
  19.     if (cache[moduleId]) {
  20.       return cache[moduleId].exports;
  21.     }
  22.     // 定义module.exports = {}
  23.     var module = (cache[moduleId] = { exports: {} });
  24.     modules[moduleId](module, module.exports, __webpack_require__);
  25.     return module.exports;
  26.   }
  28.   // 从entry入口处开始执行，也是调用自执行函数
  29.   // index.js
  30.   (() => {
  31.     // __webpack_require__ 是webpack 自定义的函数执行
  32.     let title = __webpack_require__("./src/title.js");
  33.     console.log(title);
  34.   })();
  35. })();

配置devServer

修改webpack.config.js

  1. module.exports = {
  2.   devServer: {
  3.     static: resolve(__dirname, "dist"),
  4.     compress: true,
  5.     port: 8001,
  6.     open: true,
  7.   },
  8. }

使用loader处理文件

处理css、scss、less等文件

  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       // ...
  5.       {
  6.         test: /\.css$/,
  7.         use: ["style-loader", "css-loader"],
  8.       },
  9.     ],
  10.   },
  11. }

处理jpg、png、gif、bmp等图片

  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       // ...
  5.       {
  6.         test: /\.(jpg|png|gif|svg|bmp)$/,
  7.         use: ["file-loader"],
  8.       }
  9.     ],
  10.   },
  11. }

引入图片的方式

  • 从静态目录下，直接通过img标签 绝对路径引入，需要配置devServer.static
  • 通过 require import引入
  • 通过css文件的url引入，是通过css-loader进行解析处理

  • 在html中直接通过 相对路径引入，需要将html用html-loader处理

    url-loader和file-loader的区别

  • url-loader比file-loader多了limit配置，小于改设置时，图片以base64显示

  • url-loader是对file-loader的增强。

  • 超过了配置大小，还是使用file-loader进行处理

    转ES6、7，react的jsx为es5

    安装依赖

    1. yarn add babel-loader @babel/core @babel/preset-env 
    2. @babel/preset-react @babel/polyfill 
    3. @babel/plugin-proposal-decorators 
    4. @babel/plugin-proposal-class-properties -D

  • @babel/plugin-proposal-decorators：可以使用装饰器语法

  • @babel/plugin-proposal-class-properties：使用class类语法

    1. module.exports = {
    2. module: {
    3.   rules: [    
    4.     {
    5.       test: /\.jsx?$/,
    6.       use: [
    7.         {
    8.           loader: "babel-loader",
    9.           options: {
    10.             presets: [
    11.               [
    12.                 "@babel/presets-env",
    13.                 {
    14.                   useBuiltIns: "usage", // 按需加载polyfill
    15.                   corejs: { version: 3 }, //指定corejs版本
    16.                   targets: { //指定浏览器版本
    17.                     chrome: "60",
    18.                     firefox: "60",
    19.                     ie: "9",
    20.                     safari: "10",
    21.                     edge: "17",
    22.                   },
    23.                 },
    24.               ], "@babel/presets-react"],
    25.             plugins: [
    26.               ["@babel/plugins-proposal-decorators", { legacy: true }],
    27.               ["@babel/plugin-proposal-class-properties", { loose: true }],
    28.             ],
    29.           },
    30.         },
    31.       ],
    32.     }
    33.   ]
    34. }
    35. }

    devTool设置source-map

    | eval | 不产生source-map信息，使用eval包裹代码块 | | —- | —- | | source-map | 产生source-map文件, 包含行、列信息 | | cheap | source-map文件内，不包含列信息，也不包含loader产生的source-map | | module | 包含loader产生的source-map | | inline | 将map信息作为DataURI内嵌到js文件，不单独产生source-map |

  • 开发环境推荐使用cheap-module-eval-source-map

    • module包含信息全，包含了loader信息。eval有缓存可以更快

  • 生产环境推荐使用hidden-source-map

    • hidden不会把map信息带入线上代码，又可以把打包的source-map文件放到单独的监控服务器。

      引入第三方类库的方法

  • 直接安装包，进行导入使用

    • import _ from "lodash";
  • 使用插件, webpack.ProvidePlugin进行导入
    • 在plugins中使用 new webpack.ProvidePlugin({_: 'lodash'})
  • 使用expose-loader
  • CDN结合externals引入。
    • 模版html引入lodash链接地址
    • 在webpack.config.js中设置externals: { lodash: '_' }
  • 使用插件html-webpack-externals-plugin, 进行引入
    1. plugins:[
    2. new HtmlWebpackExternalsPlugin({
    3.   externals: [
    4.     {
    5.       module: 'jquery',
    6.       entry: 'dist/jquery.min.js',
    7.       global: 'jQuery',
    8.     },
    9.   ],
    10. })
    11. ]

    设置环境变量

    通过webpack设置

    直接在命令行配置 webpack --env=dev --open;
    这种方式设置的变量，会被传递到函数中作为参数。
    1. module.exports = (env)=>{
    2. console.log(env);
    3. return {
    4.  //....
    5. }
    6. }

    通过cross-env设置

    在mac环境需要设置export NODE_ENV = dev webpack;
    在window需要set NODE_ENV = dev webpack
    通过cross-env可以跨环境设置env; cross-env NODE_ENV=dev webpack;
    直接在webpack.config.js中通过process.env获取
    1. const nodeEnv = process.env.NODE_ENV;
    2. console.log(nodeEnv);