Webpack 基础配置

NPM

设置淘宝镜像

# 配置淘宝镜像
npm config set registry https://registry.npm.taobao.org

# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装包
npm install --global
或者
npm install -g
其他命令

npm set 

# 查看包的信息
npm info jquery

# 下载指定包
npm install jquery@3.4.1

# 包列表
npm list
npm list --global

# 安装包
npm install jquery --save 或 npm i jquery -S
npm install jquery --save-dev 或 npm i jquery -D

# 全局安装包位置
npm root -g

# 修复包
npm audit fix 

# 当前安装包版本
npm ls jquery

# 查找包
npm search

# 执行npm脚本
npm run build

其他

npx 是一个方便开发者访问 node_modules 内的 bin 命令行的小工具，npx webpack -v 相当于执行了 node ./node_modules/webpack/bin/webpack -v ，npx 在开发中非常方便，推荐安装：npm install -g npx

webpack脚本

> one
"scripts": {
  "build": "webpack"
}


> 配置model
> model = production情况下，默认格式压缩
"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

> 配置输出目录
"scripts": {
  "dev": "webpack --mode development --output ./output/main.js",
  "build": "webpack --mode production --output ./output/main.js"
}

> 语法转换
> npm i @babel/core babel-loader @babel/preset-env --save-dev
> .babelrc
{
    "presets": ["@babel/preset-env"]
}

> 转化为es5写法
"scripts": {
    "dev": "webpack --mode development ./src/es/index.js --module-bind js=babel-loader",
    "build": "webpack --mode production ./src/es/index.js --module-bind js=babel-loader"
}

阅读webpack api

打包


> 普通
// hello.js
export default 'hello';
// layz.js
export default 'lazy module';
// index.js
import hello from './hello';
import('./lazy').then(lazy => {
    console.log(lazy);
});

>神奇注释打包

import hello from './hello';
import(
    /*
     webpackChunkName: 'lazy-name'
     */
    './lazy'
).then(lazy => {
    console.log(lazy);
});

后者都打包名称会变为 lazy-name.js

配置项

格式压缩

configureWebpack: config => {
    const plugins = [];
    if (process.env.NODE_ENV === 'production') {
      // 打包后关闭console
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
      // gz 和 br 都需要配置nginx 
      plugins.push(
        // .gz 
        new CompressionWebpackPlugin({
          algorithm(input, compressionOptions, callback) {
            return zopfli.gzip(input, compressionOptions, callback);
          },
          compressionOptions: {
            numiterations: 15
          },
          minRatio: 0.99,
          test: productionGzipExtensions
        })
      );
      plugins.push(
        // br 推荐
        new BrotliPlugin({
          test: productionGzipExtensions,
          minRatio: 0.99
        })
      );

    }
    config.plugins = [...config.plugins, ...plugins];
}

本文由邓尘锋创作，采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Mar 22, 2021 at 04:45 pm

NPM

或者

其他

webpack脚本

打包

配置项

格式压缩