用webpack搭建项目

1、创建项目文件夹mkdir webDemo cd webDemo

2、npm init -y初始化packge.json

3、安装webpack、babel以及基础loader

npm i webpack webpack-cli @babel/core @babel/preset-env @babel/plugin-transform-runtime babel-loader @babel/polyfill -D
npm i @babel/runtime @babel/runtime-corejs3 -D
npm i @babel/plugin-proposal-optional-chaining -D

对上面安装依赖的解释

@babel/preset-env 转化最新语法如箭头函数, class, 扩展运算符，想要转换最新的api还需引入babel-polyfill（eg: includes）

@babel/plugin-transform-runtime运行时引入 generators/async、babel-runtime/core-js（ES6->includes…）不会污染全局环境。

babel-loader

@babel/polyfill 一些新的api：Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

ES6 在Array对象上新增了Array.from方法。

@babel/runtime babel-polyfill解决了Babel不转换新API的问题，但是直接在代码中插入帮助函数，会导致污染了全局环境，并且不同的代码文件中包含重复的代码，导致编译后的代码体积变大。 （比如：上述的帮助函数_defineProperty有可能在很多的代码模块文件中都会被插入）

Babel为了解决这个问题，提供了单独的包babel-runtime用以提供编译模块的工具函数， 启用插件babel-plugin-transform-runtime后，Babel就会使用babel-runtime下的工具函数

babel/runtime-corejs3 是 @babel/runtime-corejs 的一个版本，@babel/plugin-transform-runtime 运行时需要用到，代码有2和3两个版本，其中，2版本无法为实例方法提供polyfill，但3版本可以

4、在webpack.config.js中添加babel和mode配置

const envs = {
  development: "development",
  test: "development",
  production: "production"
};
module.exports = {
  mode: envs[process.env.NODE_ENV], // 根据环境变量设置编译模式
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              plugins: [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    corejs: 3
                  }
                ]
              ]
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  }
};

安装跨平台变量环境

npm install --save-dev cross-env

修改package.json编译命令

{
  "name": "webvr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development npx webpack --watch",
    "test": "cross-env NODE_ENV=test",
    "prod": "cross-env NODE_ENV=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.0",
    "@babel/runtime": "^7.9.2",
    "@babel/runtime-corejs3": "^7.9.2",
    "babel-loader": "^8.1.0",
    "cross-env": "^7.0.2",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  }
}

安装html-webpack-plugin

npm install html-webpack-plugin -D

在webpack.config.js中添加配置

const envs = {
 development: "development",
 test: "development",
 production: "production"
};
module.exports = {
 mode: envs[process.env.NODE_ENV], // 根据环境变量设置编译模式
 module: {
   rules: [
     {
       test: /\.jsx?$/,
       use: [
         {
           loader: "babel-loader",
           options: {
             presets: ["@babel/preset-env"],
             plugins: [
               [
                 "@babel/plugin-transform-runtime",
                 {
                   corejs: 3
                 }
               ]
             ]
           }
         }
       ],
       exclude: /node_modules/
     }
   ]
 },
 plugins: [
   new HtmlWebpackPlugin({
     template: "./public/index.html",
     filename: "index.html", // 打包后的文件
     minify: {
       removeAttributeQuotes: false, // 是否删除属性的双引号
       collapseWhitespace: false // 是否折叠空白
     },
     hash: true // 是否加上hash，默认false
   })
 ]
};

安装webpack-dev-server，这样可以在本地启动项目并访问

npm install webpack-dev-server -D

修改package.json 中的开发命令，使用开发服务打开

{
  "name": "webvr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server",
    "test": "cross-env NODE_ENV=test",
    "prod": "cross-env NODE_ENV=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.0",
    "@babel/runtime": "^7.9.2",
    "@babel/runtime-corejs3": "^7.9.2",
    "babel-loader": "^8.1.0",
    "cross-env": "^7.0.2",
    "html-webpack-plugin": "^4.0.4",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

在webpack.config.js配置devServer开发服务器的选项

const envs = {
  development: "development",
  test: "development",
  production: "production"
};
module.exports = {
  mode: envs[process.env.NODE_ENV], // 根据环境变量设置编译模式
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              plugins: [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    corejs: 3
                  }
                ]
              ]
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html", // 打包后的文件
      minify: {
        removeAttributeQuotes: false, // 是否删除属性的双引号
        collapseWhitespace: false // 是否折叠空白
      },
      hash: true // 是否加上hash，默认false
    })
  ],
  devServer: {
    port: "3000", //默认是8080
    // 设置接口代理
    proxy: {
      '/api':''
    },
    quiet: false, //默认不启用
    inline: true, //默认开启 inline 模式，如果设置为false,开启 iframe 模式
    stats: "errors-only", //终端仅打印 error
    overlay: "false", //默认不启用
    clientLogLevel: "silent", //日志等级
    compress: true //是否启用 gzip 压缩
  }
};

配置devtool

const envs = {
  development: "development",
  test: "development",
  production: "production"
};
module.exports = {
  mode: envs[process.env.NODE_ENV], // 根据环境变量设置编译模式
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              plugins: [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    corejs: 3
                  }
                ]
              ]
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html", // 打包后的文件
      minify: {
        removeAttributeQuotes: false, // 是否删除属性的双引号
        collapseWhitespace: false // 是否折叠空白
      },
      hash: true // 是否加上hash，默认false
    })
  ],
  devServer: {
    port: "3000", //默认是8080
    // 设置接口代理
    proxy: {
      "/api": ""
    },
    quiet: false, //默认不启用
    inline: true, //默认开启 inline 模式，如果设置为false,开启 iframe 模式
    stats: "errors-only", //终端仅打印 error
    overlay: "false", //默认不启用
    clientLogLevel: "silent", //日志等级
    compress: true //是否启用 gzip 压缩
  },
  devtool:
    envs[process.env.NODE_ENV] === "development"
      ? "cheap-module-eval-source-map"
      : "" // 开发环境下使用
};

解析样式文件安装 style-loader less-loader css-loader postcss-loader autoprefixer less

npm install style-loader less-loader css-loader postcss-loader autoprefixer less -D

style-loader 动态创建 style 标签，将 css 插入到 head 中.
css-loader 负责处理 @import 等语句。
postcss-loader 和 autoprefixer，自动生成浏览器兼容性前缀 —— 2020了，应该没人去自己徒手去写浏览器前缀了吧
less-loader 负责处理编译 ‘.less’ 文件,将其转为 ‘css’

在webpcak.config.js中添加配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
const envs = {
  development: "development",
  test: "development",
  production: "production"
};
module.exports = {
  mode: envs[process.env.NODE_ENV], // 根据环境变量设置编译模式
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              plugins: [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    corejs: 3
                  }
                ]
              ]
            }
          }
        ],
        exclude: /node_modules/ // 排除node_modules目录
      },
      {
        test: /\.(le|c)ss$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: function() {
                return [
                  require("autoprefixer")({
                    overrideBrowserslist: [">0.25%", "not dead"]
                  })
                ];
              }
            }
          },
          "less-loader"
        ],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html", // 打包后的文件
      minify: {
        removeAttributeQuotes: false, // 是否删除属性的双引号
        collapseWhitespace: false // 是否折叠空白
      },
      hash: true // 是否加上hash，默认false
    })
  ],
  devServer: {
    port: "3000", //默认是8080
    // 设置接口代理
    proxy: {
      "/api": ""
    },
    quiet: false, //默认不启用
    inline: true, //默认开启 inline 模式，如果设置为false,开启 iframe 模式
    stats: "errors-only", //终端仅打印 error
    overlay: "false", //默认不启用
    clientLogLevel: "silent", //日志等级
    compress: true //是否启用 gzip 压缩
  },
  devtool:
    envs[process.env.NODE_ENV] === "development"
      ? "cheap-module-eval-source-map"
      : "" // 开发环境下使用
};

对图片和字体文件的加载

npm install url-loader file-loader -D

在webpcak.config.js中添加配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
const envs = {
  development: "development",
  test: "development",
  production: "production"
};
module.exports = {
  mode: envs[process.env.NODE_ENV], // 根据环境变量设置编译模式
  module: {
    rules: [
      // 解析js或jsx文件
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              plugins: [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    corejs: 3
                  }
                ]
              ]
            }
          }
        ],
        exclude: /node_modules/ // 排除node_modules目录
      },
      // 解析less或css样式文件
      {
        test: /\.(le|c)ss$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: function() {
                return [
                  require("autoprefixer")({
                    overrideBrowserslist: [">0.25%", "not dead"]
                  })
                ];
              }
            }
          },
          "less-loader"
        ],
        exclude: /node_modules/
      },
      // 解析图片，字体文件等资源
      {
        test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10240, //10K
              esModule: false,
              name: "[name]_[hash:6].[ext]",
              outputPath: "assets" // 将静态资源文件输出到assets目录
            }
          }
        ],
        exclude: /node_modules/
      },
      // 解析html中的图片
      {
        test: /\.html$/,
        use: "html-withimg-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html", // 打包后的文件
      minify: {
        removeAttributeQuotes: false, // 是否删除属性的双引号
        collapseWhitespace: false // 是否折叠空白
      },
      hash: true // 是否加上hash，默认false
    })
  ],
  devServer: {
    port: "3000", //默认是8080
    // 设置接口代理
    proxy: {
      "/api": ""
    },
    quiet: false, //默认不启用
    inline: true, //默认开启 inline 模式，如果设置为false,开启 iframe 模式
    stats: "errors-only", //终端仅打印 error
    overlay: "false", //默认不启用
    clientLogLevel: "silent", //日志等级
    compress: true //是否启用 gzip 压缩
  },
  devtool:
    envs[process.env.NODE_ENV] === "development"
      ? "cheap-module-eval-source-map"
      : "" // 开发环境下使用
};

安装clean-webpack-plugin

npm install clean-webpack-plugin -D

添加webpack.config.js配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
const envs = {
  development: "development",
  test: "development",
  production: "production"
};
module.exports = {
  mode: envs[process.env.NODE_ENV], // 根据环境变量设置编译模式
  module: {
    rules: [
      // 解析js或jsx文件
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              plugins: [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    corejs: 3
                  }
                ]
              ]
            }
          }
        ],
        exclude: /node_modules/ // 排除node_modules目录
      },
      // 解析less或css样式文件
      {
        test: /\.(le|c)ss$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: function() {
                return [
                  require("autoprefixer")({
                    overrideBrowserslist: [">0.25%", "not dead"]
                  })
                ];
              }
            }
          },
          "less-loader"
        ],
        exclude: /node_modules/
      },
      // 解析图片，字体文件等资源
      {
        test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10240, //10K
              esModule: false,
              name: "[name]_[hash:6].[ext]",
              outputPath: "assets" // 将静态资源文件输出到assets目录
            }
          }
        ],
        exclude: /node_modules/
      },
      // 解析html中的图片
      {
        test: /\.html$/,
        use: "html-withimg-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html", // 打包后的文件
      minify: {
        removeAttributeQuotes: false, // 是否删除属性的双引号
        collapseWhitespace: false // 是否折叠空白
      },
      hash: true // 是否加上hash，默认false
    }),
    // 每次重新编译前清空输出目录，不需要传参数喔，它可以找到 outputPat
    new CleanWebpackPlugin()
  ],
  devServer: {
    port: "3000", //默认是8080
    // 设置接口代理
    proxy: {
      "/api": ""
    },
    quiet: false, //默认不启用
    inline: true, //默认开启 inline 模式，如果设置为false,开启 iframe 模式
    stats: "errors-only", //终端仅打印 error
    overlay: "false", //默认不启用
    clientLogLevel: "silent", //日志等级
    compress: true //是否启用 gzip 压缩
  },
  devtool:
    envs[process.env.NODE_ENV] === "development"
      ? "cheap-module-eval-source-map"
      : "" // 开发环境下使用
};