webpack安装

webpack的作用

• 转译代码
• 构建build
• 代码压缩
• 代码分析

webpack安装

一般推荐本地安装 webpack.js.org/guides/gett…

yarn add webpack webpack-cli --save-dev
//本地安装的方法，运行后出现一个node_modules目录，webpack就存放在./node_modules/.bin/webpack路径下

./node_modules/.bin/webpack --version
//查看并调用本地安装的webpack的版本

npx webpack
//"./node_modules/.bin/webpack --version"的简便命令
//自动找当前目录下的webpack版本，但不够稳定。

yarn add html-webpack-plugin --dev

yarn add css-loader --dev
yarn add style-loader --dev

安装webpack-dev-server

方便开发时本地预览。

webpack.js.org/guides/

yarn add webpack-dev-server --dev
yarn start

webpack版本查看

npx webpack --help
npm info webpack-cli

MiniCssExtractPlugin自动生成css

webpack.js.org/plugins/min…

安装

yarn add mini-css-extract-plugin --dev

做两个webpack.config.js 使得插件可以切换

webpack.config.dev.js

开发的时候用下述代码

use: ["style-loader", "css-loader"],//不会产生缓存

webpack.config.prod.js 上传的时候//生产的时候用下述代码，因为要产生dist缓存文件

use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "/public/path/to/",
            },
          },
          "css-loader",
    ],

yarn start//开发代码预览//开发
yarn build//上线代码build缓存//上传

可以用merge方法把

webpack.config.dev.js和webpack.config.prod.js中相同的代码提取放入新的文件

webpack.config.base.js，然后用继承的方法，让webpack.config.dev.js和webpack.config.prod.js继承webpack.config.base.js中的代码，从而达到简化webpack.config.dev.js和webpack.config.prod.js的目的。

继承代码

const base = require("./webpack.config.base.js");
module.exports = {
  ...base,
  plugins: [
    ...base.plugins,
    ]
}