查看webpack版本_webpack 上

版本

webpack@4

• 安装方法在官网，在webpack后面加个 @4即可
• 学会看文档，如果webpack升级到5了，也可以使用同样思路
• 官网 https://webpack.js.org/

使用 npm 或者 yarn

// npm
npm info webpack version  // 查看 webpack 版本号
npm info webpack  // 查看 webpack 所有信息
npm init -y // 初始化 package.json
npm install webpack webpack-cli --save-dev // 本地安装 webpack

// yarn
yarn init -y
yarn add webpack webpack-cli --dev

webpack-dev-server

用于本地预览

用 webapck 转译 JS

文档：https://webpack.js.org/guides/getting-started/

npx

自动找 webpack 路径

可以看到 webpack 转译了 index.js，压缩后代码变成了 dist 里 main.js，webpack还可以转译一些复杂的js代码，比如 import、export default 等等在浏览器运行。

webpack-config

前面使用 npx webpack 时有个配置警告，WARNING in configuration，直接搜索警告https://webpack.js.org/concepts/configuration/

再次使用 CRM 学习法！创建 webpack-config.js，复制上面代码，只修改指定的 mode 警告！然后再次 npx webpack

成功！然后发现main.js 代码已经变化了

mode 两种模式

细心的话会发现 main.js 的代码已经变了

这是因为 mode 有两种模式，development（开发中） 或者 production（发布中），换到production再npx webpack就能看出区别了

代码又被压缩体积变小了！

入口、出口

entry 入口

可配置entry默认入口

再次执行 npx webpack，就发现变成 foo.bundle.js了

output 出口

很显然 ，它可以把src下的index.js 转译成 dist 目录下的main.js，但是我们可以更改 filename，再次执行 npx webpack

path是默认的dist，可以不用

文件名 hash

搜索关键字 webpack filename hash，使用 CRM 学习方法

output: {
    filename: "[name].[contenthash].js",
},

然后执行 npx webpack，会发现转译后的文件名后面多了一串数字，这关联到 HTTP缓存

Cache Control

http缓存

何为http缓存？举个栗子，假设我们第一次访问百度，请求了很多文件

当我们再次访问百度时，百度是不是会重新把这些文件全部加载一遍？答案是不会，为了提高网站访问响应速度，一般都会使用 HTTP缓存！假设我们给这些文件加上缓存，比如一年！当第二次访问百度时，只需要下载最新html，然后 index.html再从内存里面请求已经缓存了的文件，访问速度超快！！！

如果一年中有更新怎么办？为什么index.html不用缓存？

更新缓存

由于缓存是跟着文件名走的，只要更新文件名就好了！只要对文件名做一个hash就可以了，假如文件内容更改，然后再次发布 webpack，webpack会把文件名更改，浏览器看见更改的文件名就会重新请求新的文件。

index.html 是不能缓存的，因为如果连首页都缓存了，那么是不能去更新局部文件的！首页缓存了只有一年后才会更新，，，

插件

删除重复文件

由于webpack会生成新文件，dist里的文件会越来越多，所以要先 rm -rf dist/; npx webpack，但是每次都要执行这两句命令很烦，有没有什么快捷方式呢？答案是有的。

在package.json 里 script 里加一句：

build": "rm -rf dist && webpack"

那么以后打包只需执行：

npm run build 
// 或者 
yarn build

就能每次删掉多余的文件了！

HtmlWebpackPlugin

使用插件生成 html

yarn add html-webpack-plugin --dev 
// module_export 里面再加一句 
plugins: [new HtmlWebpackPlugin()]

运行 yarn build 成功

可以把main.xxx.js 更改名字。插件还可以自定义：https://github.com/jantimon/html-webpack-plugin

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackPlugin({  
    title: 'My App',
    template: 'src/assets/test.html'
  })
]

还有很多功能，，，

css-loader

生成 css，搜索关键词 webpack css loader

yarn add css-loader --dev 

yarn add style-loader --dev

然后再次运行 yarn build 成功

webpack-dev-server

• 文件内容变化就自动转译代码，并自动刷新页面
• 提供 server 方便开发预览

每次build挺麻烦的，可以使用 webpack-dev-server来快速开发，实现自动刷新

// 下载 
yarn add webpack-dev-server --dev  

// webpack.config.js 
devtool: 'inline-source-map', 
devServer: {  contentBase: './dist', },  

// package.json 
"start": "webpack-dev-server --open",

MiniCssExtractPlugin

之前是用 js 生成 style标签，那能不能把 css 抽成文件呢？答案肯定是有的，使用 MiniCssExtractPlugin

// 下载
yarn add mini-css-extract-plugin --dev

// plugins
plugins: [
  new MiniCssExtractPlugin({
    // Options similar to the same options in webpackOptions.output
    // all options are optional
    filename: '[name].css',
    chunkFilename: '[id].css',
    ignoreOrder: false, // Enable to remove warnings about conflicting order
  }),
],
  
// use
use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: "../",
        hmr: process.env.NODE_ENV === "development",
      },
    },
    "css-loader",
],
  
// 缓存
new MiniCssExtractPlugin({
  filename: "[name].[contenthash].css",
  chunkFilename: "[id].[contenthash].css",
}),

根据模式选择不同途径

使用不同的 webpack config 文件，分为webpack.config.js / webpack.config.prod.js / webpack.config.base.js

// webpack.config.js 开发模式下使用
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const base = require("./webpack.config.base.js"); // 引入 base

module.exports = {
  ...base,
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist",
  },
  module: {
    rules: [
      {
        test: /.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

// webpack.config.prod.js 生产环境下使用
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const base = require("./webpack.config.base.js"); // 引入 base

module.exports = {
  ...base,
  mode: "production", // 生产模式
  plugins: [
    ...base.plugins,
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
      chunkFilename: "[id].[contenthash].css",
      ignoreOrder: false,
    }),
  ],
  module: {
    rules: [
      {
        test: /.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

// webpack.config.base.js 让前两个文件继承共有属性
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.[contenthash].js",
  },
  devServer: {
    contentBase: "./dist",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "ky --github.com",
      template: "src/assets/index.html",
    }),
  ],
};

// package.json build时使用新配置
"build": "rm -rf dist && webpack --config webpack.config.prod.js"

通过让开发模式与生产环境继承 webpack.config.base.js，做到不同的环境使用不同的配置，配置间是继承的关系，这样就能通过不同的webpack config 文件来更方便的使用 webpack打包！

也可以搜索 webpack config merge 使用第三方库来做到同样的效果。

webpack 上 总结

• 将一个或多个 JS 文件打包成对应的文件
• 将一个或多个 CSS 文件打包成对应的文件
• 压缩代码
• 将高版本的 JS转译成低版本的 JS