开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 面向高级之webpack4基础1 -> 正文阅读

[JavaScript知识库]面向高级之webpack4基础1

面向高级之webpack基础1

安装nvm与node

nvm 的安装 https://www.cnblogs.com/gaozejie/p/10689742.html
- 查看node有多少个版本 nvm list
- 安装其他node版本 nvm install v10.15.3
- webpack与webpack-cli版本 – "webpack": "^4.35.0", "webpack-cli": "^3.3.5"

–save-dev || -D 与 --save || -S的区别

–save-dev || -D //开发依赖（辅助）
–save || -S // 运行依赖（发布）

简单初始化项目之基础配置

初始化项目 npm init -y 会生成package.json

按照webpack与脚手架 npm install webpack webpack-cli --save-dev

输入 ./node_modules/.bin/webpack -v 查看安装的webpack版本
webpack 5.53.0
webpack-cli 4.8.0
初始化的打包 ./node_modules/.bin/webpack

项目根目录下创建 webpack配置文件 webpack.config.js

配置打包指令 package.json

  "scripts": {
    "build":"webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

安装react基础东西

npm i react react-dom @babel/preset-react -D

webpack4之基础2 webpack.config.js配置

webpack.config.js文件的配置

0：mode的模式

在这里插入图片描述

1：enter的使用方式 - 打包的入口

在这里插入图片描述

2：output打包的出口

```js
'use strict';
const path = require('path');

module.exports = {
  // // 单文件入口
  // entry: './src/index.js',
  // // 单文件出口
  // output: {
  //   path: path.resolve(__dirname, 'dist'),
  //   filename: 'bundle.js', 
  // }
  // 多入口
  entry: {
    index: './src/index.js',
    hello2: './src/hello2.js'
  },
  // 多出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js', // 占位符合实现文件的唯一性
  },
  // 打包的模式 - 生产
  mode: 'production'
};
```

3：loader加载器 - scss - less 预编译处理器等处理 es6等语法转化

.babelrc.js文件

解析ES6

安装依赖 npm i @babel/core @babel/preset-env babel-loader -D
根目录下创建 .babelrc.js文件

{
  // 配置es6 语法转化
  "presets": [["@babel/preset-env"]]
}

在webpack.config.js 文件中配置 module 加载es6语法

'use strict';
const path = require('path');
module.exports = {
  // 单文件入口
  entry: './src/index.js',
  // 单文件出口
  output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js', 
  }
  // 打包的模式 - 生产
  mode: 'production',
  // loader的配置
  module: {
    rules: [{
      test: /.js$/,
      use: 'babel-loader'
    }]
  }
};

对react语法的解析

在前面 .babelrc.js 对es6的基础上增添东西

{
  // 配置es6 语法转化 与react的解析
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

对css相关的解析

解析css
- 安装：npm i style-loader@1.0.1 css-loader@3.3.2 -D
解析scss：
- 安装：npm install node-sass@4.14.1 -D 与 npm install sass-loader@10.1.1 -D

'use strict';
const path = require('path');

module.exports = {
  // 单文件入口
  entry: 'XXX',
  output: {}
  // 打包的模式 - 生产
  mode: 'production',
  // loader的配置
  module: {
    rules: [{
        test: /.js$/,
        use: 'babel-loader'
      },
      // 处理css
      {
        test: /\.css$/, //匹配以.css文件结尾的文件 
        use: ['style-loader', 'css-loader'] //然后使用这个两个加载器去处理！
      },
      // 处理scss
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          "style-loader",
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
    ]
  }
};

对图片和文字的解析

解析img
- npm i url-loader@4.1.1 file-loader@6.2.0 -D

  module: {
      // 处理img
      {
        test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10240
          }
        }]
      },
      // // 处理字体
      // {
      //   test:/.(woff|woff2|eot|ttf|otf)$/,//等img的后缀名
      //   use: ["file-loader"]//匹配 img的各种后缀 处理后打包！
      // },
  }

插入篇脚本指令

源代码更新后，自动打包 package.json 执行npm run watch

缺点：就是需要刷新浏览器

  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

4：plugin插件 -

自动更新前端代码插件

安装：npm install webpack-dev-server@3.1.4 -D

package.json配置

"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"dev": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
}

webpack.config.js配置

'use strict';
const path = require('path');
const webpack = require('webpack');

module.exports = {
  // 多入口
  entry: {
    index: './src/index.js',
    hello2: './src/hello2.js'
  },
  // 多出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js', // 占位符合实现文件的唯一性
  },
  // 打包的模式 - 生产 production 开发环境：development 
  mode: 'development',
  // loader的配置
  module: {
    rules: [
    // 省略了之前的css等！
      // 处理es6语法
      {
        test: /.js$/,
        use: 'babel-loader'
      },
    ]
  },
  // 插件
  plugins: [
    // 开发阶段 热更新插件
    new webpack.HotModuleReplacementPlugin()
  ],
  // 服务器设置
  devServer: {
    contentBase: path.join(__dirname, "dist"),// 服务基础目录
    hot: true,
    inline: true,
    port: 9292,
  }
};

注意点：以上的修改为开发时配置 webpack.dev.js

'use strict';
const path = require('path');
const webpack = require('webpack');

module.exports = {
  // // 单文件入口
  // entry: './src/index.js',
  // // 单文件出口
  // output: {
  //   path: path.resolve(__dirname, 'dist'),
  //   filename: 'bundle.js', 
  // }
  // 多入口
  entry: {
    index: './src/index.js',
    hello2: './src/hello2.js'
  },
  // 多出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js', // 占位符合实现文件的唯一性
  },
  // 打包的模式 - 生产 production 开发环境：development 
  mode: 'development',
  // loader的配置
  module: {
    rules: [
      // 处理es6语法
      {
        test: /.js$/,
        use: 'babel-loader'
      },
      // 处理css
      {
        test: /\.css$/, //匹配以.css文件结尾的文件 
        use: ['style-loader', 'css-loader'] //然后使用这个两个加载器去处理！
      },
      // 处理scss
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          "style-loader",
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
      // 处理img
      {
        test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10240
          }
        }]
      },
      // // 处理字体
      // {
      //   test:/.(woff|woff2|eot|ttf|otf)$/,//等img的后缀名
      //   use: ["file-loader"]//匹配 img的各种后缀 处理后打包！
      // },
    ]
  },
  // 插件
  plugins: [
    // 开发阶段 热更新插件
    new webpack.HotModuleReplacementPlugin()
  ],
  // 服务器设置
  devServer: {
    contentBase: path.join(__dirname, "dist"),// 服务基础目录 开启前端代码项目目录
    hot: true,
    inline: true,
    port: 9292,
  }
};

针对webpack.prod.js 生产时配置

配置脚本 package.json之中

  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server --config webpack.dev.js --open",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

文件的名称取前哈希值几位文件指纹

css
- npm install mini-css-extract-plugin@0.8.0 -D

// 生产环境的webpack配置
'use strict';
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // // 单文件入口
  // entry: './src/index.js',
  // // 单文件出口
  // output: {
  //   path: path.resolve(__dirname, 'dist'),
  //   filename: 'bundle.js', 
  // }
  // 多入口
  entry: {
    index: './src/index.js',
    hello2: './src/hello2.js'
  },
  // 多出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_[chunkhash:8].js', // 占位符合实现文件的唯一性 js文件指纹
  },
  // 打包的模式 - 生产 production 开发环境：development 
  mode: 'production',
  // loader的配置
  module: {
    rules: [
      // 处理es6语法
      {
        test: /.js$/,
        use: 'babel-loader'
      },
      // 处理css
      {
        test: /\.css$/, //匹配以.css文件结尾的文件 
        use: [
          // 'style-loader', 与之互斥  MiniCssExtractPlugin.loader,
          MiniCssExtractPlugin.loader,
          'css-loader'
        ] //然后使用这个两个加载器去处理！
      },
      // 处理scss
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          // "style-loader",
          MiniCssExtractPlugin.loader,
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
      // 处理img
      {
        test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名
        use: [{
          loader: 'file-loader', // url-loader
          options: {
            // limit: 10240
            name: '[name]_[hash:8].[ext]', // img文件指纹
          }
        }]
      },
      // // 处理字体
      // {
      //   test: /.(woff|woff2|eot|ttf|otf)$/, //等img的后缀名
      //   use: [{
      //     loader: 'file-loader', // url-loader
      //     options: {
      //       name: '[name]_[hash:8].[ext]', // img文件指纹
      //     }
      //   }]
      // },
    ]
  },
  plugins: [
  // 抽离css文件
    new MiniCssExtractPlugin({
      filename: '[name]_[chunkhash:8].css',
      chunkFilename: "[id].css"
    })
  ]
};

代码压缩

html压缩
- 安装：npm install html-webpack-plugin@3.2.0 -D
css压缩
- 安装：npm install optimize-css-assets-webpack-plugin@5.0.1 -D npm install cssnano@4.1.10 -D
js压缩

// 生产环境的webpack配置
'use strict';
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // // 单文件入口
  // entry: './src/index.js',
  // // 单文件出口
  // output: {
  //   path: path.resolve(__dirname, 'dist'),
  //   filename: 'bundle.js', 
  // }
  // 多入口
  entry: {
    index: './src/index.js',
    hello2: './src/hello2.js'
  },
  // 多出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_[chunkhash:8].js', // 占位符合实现文件的唯一性 js文件指纹
  },
  // 打包的模式 - 生产 production 开发环境：development 
  mode: 'production',
  // loader的配置
  module: {
    rules: [
      // 处理es6语法
      {
        test: /.js$/,
        use: 'babel-loader'
      },
      // 处理css
      {
        test: /\.css$/, //匹配以.css文件结尾的文件 
        use: [
          // 'style-loader', 与之互斥  MiniCssExtractPlugin.loader,
          MiniCssExtractPlugin.loader,
          'css-loader'
        ] //然后使用这个两个加载器去处理！
      },
      // 处理scss
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          // "style-loader",
          MiniCssExtractPlugin.loader,
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
      // 处理img
      {
        test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名
        use: [{
          loader: 'file-loader', // url-loader
          options: {
            // limit: 10240
            name: '[name]_[hash:8].[ext]', // img文件指纹
          }
        }]
      },
      // // 处理字体
      // {
      //   test: /.(woff|woff2|eot|ttf|otf)$/, //等img的后缀名
      //   use: [{
      //     loader: 'file-loader', // url-loader
      //     options: {
      //       name: '[name]_[hash:8].[ext]', // img文件指纹
      //     }
      //   }]
      // },
    ]
  },
  plugins: [
    // css模块的抽离
    new MiniCssExtractPlugin({
      filename: '[name]_[chunkhash:8].css',
      chunkFilename: "[id].css"
    }),
    // css代码的压缩
    new OptimizeCSSAssetsPlugin({
      // 默认是全部的CSS都压缩，该字段可以指定某些要处理的文件
      assetNameRegExp: /\.(sa|sc|c)ss$/g,
      // 指定一个优化css的处理器，默认cssnano
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', {
          discardComments: {
            removeAll: true
          }, //对注释的处理
          normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码
        }]
      },
      canPrint: true // 是否打印编译过程中的日志
    }),
    // 压缩html 一个页面对应一个htmlWebpackPlugin 由于有两个html需要两个
    new htmlWebpackPlugin({
      template: path.join(__dirname, "./src/index.html"),
      filename: "index.html",
      chunks: ['index'],
      inject: true,
      minify: { //表示提供压缩选项
        html5:true,
        removeComments: true, //移除页面的注释
        collapseWhitespace: true, //合并空白字符
        removeAttributeQuotes: true, //移除属性节点上的引号！
      }
    }),
    new htmlWebpackPlugin({
      template: path.join(__dirname, "./src/search.html"),
      filename: "search.html",
      chunks: ['search'],
      inject: true,
      minify: { //表示提供压缩选项
        html5:true,
        removeComments: true, //移除页面的注释
        collapseWhitespace: true, //合并空白字符
        removeAttributeQuotes: true, //移除属性节点上的引号！
      }
    }),
  ]
};

自动清除打包后的dist目录

安装：npm install clean-webpack-plugin@2.0.2 -D
- 引入const clearWebpackPlugin = require(“clean-webpack-plugin”)
- 使用 new clearWebpackPlugin(),
prod.js && dev.js 都需要

// 生产环境的webpack配置
'use strict';
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const clearWebpackPlugin = require("clean-webpack-plugin") // 自动清理dist目录

module.exports = {
  // // 单文件入口
  // entry: './src/index.js',
  // // 单文件出口
  // output: {
  //   path: path.resolve(__dirname, 'dist'),
  //   filename: 'bundle.js', 
  // }
  // 多入口
  entry: {
    index: './src/index.js',
    hello2: './src/hello2.js'
  },
  // 多出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_[chunkhash:8].js', // 占位符合实现文件的唯一性 js文件指纹
  },
  // 打包的模式 - 生产 production 开发环境：development 
  mode: 'production',
  // loader的配置
  module: {
    rules: [
      // 处理es6语法
      {
        test: /.js$/,
        use: 'babel-loader'
      },
      // 处理css
      {
        test: /\.css$/, //匹配以.css文件结尾的文件 
        use: [
          // 'style-loader', 与之互斥  MiniCssExtractPlugin.loader,
          MiniCssExtractPlugin.loader,
          'css-loader'
        ] //然后使用这个两个加载器去处理！
      },
      // 处理scss
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          // "style-loader",
          MiniCssExtractPlugin.loader,
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
      // 处理img
      {
        test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名
        use: [{
          loader: 'file-loader', // url-loader
          options: {
            // limit: 10240
            name: '[name]_[hash:8].[ext]', // img文件指纹
          }
        }]
      },
    ]
  },
  // optimization: {
  //   minimizer: [new UglifyJsPlugin()]
  // },
  plugins: [
    // css模块的抽离
    new MiniCssExtractPlugin({
      filename: '[name]_[chunkhash:8].css',
      chunkFilename: "[id].css"
    }),
   // 此处省略 上方代码。。。。
    // 清理dist目录
    new clearWebpackPlugin(),
  ]
};

自动补全css3前缀

安装：npm install postcss-loader@3.0.0 autoprefixer@9.5.1 -D

// 生产环境的webpack配置
'use strict';
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const clearWebpackPlugin = require("clean-webpack-plugin") // 自动清理dist目录

module.exports = {
  // // 单文件入口
  // entry: './src/index.js',
  // // 单文件出口
  // output: {
  //   path: path.resolve(__dirname, 'dist'),
  //   filename: 'bundle.js', 
  // }
  // 多入口
  entry: {
    index: './src/index.js',
    hello2: './src/hello2.js'
  },
  // 多出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_[chunkhash:8].js', // 占位符合实现文件的唯一性 js文件指纹
  },
  // 打包的模式 - 生产 production 开发环境：development 
  mode: 'production',
  // loader的配置
  module: {
    rules: [
      // 处理es6语法
      {
        test: /.js$/,
        use: 'babel-loader'
      },
      // 处理css
      {
        test: /\.css$/, //匹配以.css文件结尾的文件 
        use: [
          // 'style-loader', 与之互斥  MiniCssExtractPlugin.loader,
          MiniCssExtractPlugin.loader,
          'css-loader'
        ] //然后使用这个两个加载器去处理！
      },
      // 处理scss
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          // "style-loader",
          MiniCssExtractPlugin.loader,
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
          {
            loader:'postcss-loader',
            options:{
              plugins: () => [
                require('autoprefixer')({
                  browsers:['last 2 version','>1%','ios 7'] // 兼容道最新的两个版本
                })
              ]
            }
          }
        ],
      },
      // 处理img
      {
        test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名
        use: [{
          loader: 'file-loader', // url-loader
          options: {
            // limit: 10240
            name: '[name]_[hash:8].[ext]', // img文件指纹
          }
        }]
      },
      // // 处理字体
      // {
      //   test: /.(woff|woff2|eot|ttf|otf)$/, //等img的后缀名
      //   use: [{
      //     loader: 'file-loader', // url-loader
      //     options: {
      //       name: '[name]_[hash:8].[ext]', // img文件指纹
      //     }
      //   }]
      // },
    ]
  },
  // optimization: {
  //   minimizer: [new UglifyJsPlugin()]
  // },
  plugins: [
    // css模块的抽离
    new MiniCssExtractPlugin({
      filename: '[name]_[chunkhash:8].css',
      chunkFilename: "[id].css"
    }),
    // css代码的压缩
    new OptimizeCSSAssetsPlugin({
      // 默认是全部的CSS都压缩，该字段可以指定某些要处理的文件
      assetNameRegExp: /\.(sa|sc|c)ss$/g,
      // 指定一个优化css的处理器，默认cssnano
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', {
          discardComments: {
            removeAll: true
          }, //对注释的处理
          normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码
        }]
      },
      canPrint: true // 是否打印编译过程中的日志
    }),
    // 压缩html 一个页面对应一个htmlWebpackPlugin 由于有两个html需要两个
    new htmlWebpackPlugin({
      template: path.join(__dirname, "./src/index.html"),
      filename: "index.html",
      chunks: ['index'],
      inject: true,
      minify: { //表示提供压缩选项
        html5:true,
        removeComments: true, //移除页面的注释
        collapseWhitespace: true, //合并空白字符
        removeAttributeQuotes: true, //移除属性节点上的引号！
      }
    }),
    new htmlWebpackPlugin({
      template: path.join(__dirname, "./src/search.html"),
      filename: "search.html",
      chunks: ['search'],
      inject: true,
      minify: { //表示提供压缩选项
        html5:true,
        removeComments: true, //移除页面的注释
        collapseWhitespace: true, //合并空白字符
        removeAttributeQuotes: true, //移除属性节点上的引号！
      }
    }),
    // 清理dist目录
    new clearWebpackPlugin(),
  ]
};