面向高级之webpack4基础1

最新推荐文章于 2023-05-16 09:09:28 发布
最新推荐文章于 2023-05-16 09:09:28 发布
阅读量118 收藏
点赞数
分类专栏： 面向高阶 文章标签： node.js react.js javascript 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47409897/article/details/120443033
版权

目录

面向高级之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(),
  ]
};
px自动转化为rem
  • 安装：npm install px2rem-loader@0.1.9 -D 与 npm install lib-flexible@0.3.2 -S
  • 注意点：webpack.prod.js文件中配置 需要注意scss之中的加载顺序
  // loader的配置
  module: {
    rules: [
      // 处理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",
          // px 转化为rem
          {
            loader: 'px2rem-loader',
            options: {
              remUnit: 75, // 以750分辨率为标准
              remPrecision: 8 // px转化为rem的小数点位数
            }
          },
          // 自动补全 浏览器前缀
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('autoprefixer')({
                  browsers: ['last 2 version', '>1%', 'ios 7'] // 兼容道最新的两个版本
                })
              ]
            }
          },
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
     ]
   },
多页面打包
  • 文件需要整理为 home/index.html等 hello/index.html - index.js
  • 安装：npm install glob@7.1.4 -D
  • 操作webpack.prod.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 clearWebpackPlugin = require("clean-webpack-plugin") // 自动清理dist目录
// 设置多页面打包
const glob = require('glob');
const setMPA = () => {
  const entry = {};
  const htmlWebpackPlugins = [];
  const entryFile = glob.sync(path.join(__dirname, './src/*/index.js'))
  // XXX/webpackTest/src/index/index.js
  Object.keys(entryFile).map((index) => {
    const reentryFile = entryFile[index];
    // console.log("reenterFile", reenterFile); // XXX/webpackTest/src/index/index.js
    const match = reentryFile.match(/src\/(.*)\/index\.js/);
    // console.log("match", match);
    const pageName = match && match[1];
    // console.log("pageName",pageName);
    entry[pageName] = reentryFile;
    htmlWebpackPlugins.push(
      new htmlWebpackPlugin({
        template: path.join(__dirname, `./src/${pageName}/index.html`),
        filename: `${pageName}.html`,
        chunks: [pageName],
        inject: true,
        minify: { //表示提供压缩选项
          html5: true,
          removeComments: true, //移除页面的注释
          collapseWhitespace: true, //合并空白字符
          removeAttributeQuotes: true, //移除属性节点上的引号！
        }
      }),
    )
  })
  return {
    entry,
    htmlWebpackPlugins
  }
}
const {
  entry,
  htmlWebpackPlugins
} = setMPA();

module.exports = {
  // 多入口
  entry: entry,
  // 多出口
  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",
          // px 转化为rem
          {
            loader: 'px2rem-loader',
            options: {
              remUnit: 75, // 以750分辨率为标准
              remPrecision: 8 // px转化为rem的小数点位数
            }
          },
          // 自动补全 浏览器前缀
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('autoprefixer')({
                  browsers: ['last 2 version', '>1%', 'ios 7'] // 兼容道最新的两个版本
                })
              ]
            }
          },
          // 将 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文件指纹
          }
        }]
      },
    ]
  },
  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 // 是否打印编译过程中的日志
    }),
    // 清理dist目录
    new clearWebpackPlugin(),
  ].concat(htmlWebpackPlugins)
};
构建变量开发调试 查看源代码
  • webpack.dev.js 文件中
'use strict';
const path = require('path');
const webpack = require('webpack');
const clearWebpackPlugin = require("clean-webpack-plugin") // 自动清理dist目录
const htmlWebpackPlugin = require('html-webpack-plugin');
// 设置多页面打包
const glob = require('glob');
const setMPA = () => {
  const entry = {};
  const htmlWebpackPlugins = [];
  const entryFile = glob.sync(path.join(__dirname, './src/*/index.js'))
  // XXX/webpackTest/src/index/index.js
  Object.keys(entryFile).map((index) => {
    const reentryFile = entryFile[index];
    // console.log("reenterFile", reenterFile); // XXX/webpackTest/src/index/index.js
    const match = reentryFile.match(/src\/(.*)\/index\.js/);
    // console.log("match", match);
    const pageName = match && match[1];
    // console.log("pageName",pageName);
    entry[pageName] = reentryFile;
    htmlWebpackPlugins.push(
      new htmlWebpackPlugin({
        template: path.join(__dirname, `./src/${pageName}/index.html`),
        filename: `${pageName}.html`,
        chunks: [pageName],
        inject: true,
        minify: { //表示提供压缩选项
          html5: true,
          removeComments: true, //移除页面的注释
          collapseWhitespace: true, //合并空白字符
          removeAttributeQuotes: true, //移除属性节点上的引号！
        }
      }),
    )
  })
  return {
    entry,
    htmlWebpackPlugins
  }
}
const {
  entry,
  htmlWebpackPlugins
} = setMPA();

module.exports = {
  // 多入口
  entry: entry,
  // 多出口
  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
          }
        }]
      },
    ]
  },
  // 插件
  plugins: [
    // 开发阶段 热更新插件
    new webpack.HotModuleReplacementPlugin(),
    // 清理dist目录
    new clearWebpackPlugin(),
  ].concat(htmlWebpackPlugins),
  // 服务器设置
  devServer: {
    contentBase: path.join(__dirname, "dist"), // 服务基础目录 开启前端代码项目目录
    hot: true,
    inline: true,
    port: 9292,
  },
  // eval source-map cheap-source-map
  devtool: 'source-map'
};
提取页面的公共资源
基础库的分离
  • 安装：npm html-webpack-externals-plugin@3.8.0 -D
小小liang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack4安装
atu1111的博客
07-30 975
webpack4安装 全局安装webpack （不推荐，进行下一步操作） npm install webpack -g 局部安装webpack(推荐) npm install webpack --save-dev 另外，webpack 4要求安装包 npm install webpack-cli --save-dev
Webpack4-的安装和使用
liujun2son
07-11 2714
1.Webpack安装 在用 Webpack 执行构建任务时需要通过 webpack 可执行文件去启动构建任务，所以需要安装 webpack 可执行文件。 ( 例如：webpack --config webpack.config.js ) 在安装 Webpack工具前请确保你的系统安装了5.0.0及以上版本的 Node.js。因为webpack在执行打包压缩等时是依赖node.js的，没有no...
webpack4的安装、打包（详细版）
qq_43406819的博客
01-08 2659
webpack4的版本 webpack4.41.5 首先我们要创建一个html的工作文件夹，然后用VS Code进入这个文件夹 然后初始化这个文件夹，这里我们用yarn命令初始化 npm i yarn -g //全局安装yarn yarn init -y //初始化 //也可以用npm npm init -y 在我们工作根目录下创建src文件夹 在src文件夹下创建index.html和...
Webpack4.x（一）安装及入门
小苹果的成长笔记
08-16 201
构建工具 官网： https://www.webpackjs.com/ 安装：(前提条件：node.js必须安装) npm init -y (创建一个package.json,必需有这个才能安装模块) npm install webpack --save-dev npm install webpack-cli --save-dev 两条命令可以简写为： npm i we...
webpack4 安装配置及使用方法
superKM的博客
06-06 1076
webpack官网地址：https://webpack.github.io 1. 初探webpack 1.1 webpack的安装 创建文件夹 webpack-test mkdir webpack-test cd webpack-test 在 webpack-test文件夹下通过npm init构建环境 webpack4.x后需要安装webpack-cli ...
大厂Web全栈工程师 Promise+ES6+Vue高级+React高级+前端工程化+Node.js+AST+Webpack
06-23
完成课程的学习课程可以帮助同学们从普通的Web工程师蜕变为高级Web全栈开发工程师，课程可以同学们全程的了解以Promise、ES6、Vue高级、React高级、前端工程化、Node.js、AST、Webpack技术为主的Web全栈技术，非常的...
javascript高级编程v3
07-06
1. **基础语法**：包括变量声明（var, let, const）、数据类型（基本类型与引用类型）、运算符、流程控制（条件语句、循环语句）、函数以及作用域等。 2. **面向对象编程**：JavaScript虽然不是一种严格的面向对象...
javascript 高级程序设计源码
01-06
1. **基础语法**：包括变量、数据类型、操作符、流程控制语句、函数、对象和数组等JavaScript的基础元素。 2. **作用域和闭包**：理解变量的作用域规则以及如何利用闭包实现封装和模块化，这是JavaScript中非常重要...
curso-javascript-typescript:JavaScript和TypeScript课程库从基础到高级
04-18
:rocket: 从2021到高级JavaScript和TypeScript课程 :open_book: 关于 Javascript和TypeScript课程的存储库-前端和后端（完整堆栈）-节点，Express，noSQL，React，钩子，Redux，设计模式。 :bookmark_tabs: 主要...
Javascript基础+提高
11-10
1. **闭包**：闭包是JavaScript中的一个高级概念，它允许函数访问并操作其外部作用域的变量，同时保持这些变量的状态。理解和运用闭包能有效提升代码的复用性和封装性。 2. **原型与继承**：JavaScript使用原型链...
由浅入深配置webpack4
油墨香^-^的博客
03-30 615
webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。webpack需要掌握的核心概念👇Entry:webpack开始构建的入口模块Output: 如何命名输出文件，以及输出目录，比如常见的dist目录。Loaders:作用在于解析文件，将无法处理的非js文件，处理成webpack能够处理的模块。Plugins。
webpack4打包实战
woyebuzhidao321的博客
02-17 3859
一、模块化打包工具的由来 ES Module存在环境兼容问题，通过模块化方式划分的模块较多，网络请求频繁，在前端应用开发中不仅仅需要JavaScript代码需要模块化，随着应用的日益复杂，html，css同样也面临相同的问题，也就是说，所有的前端资源都需要模块化。 所需要的工具需要满足的条件： 新特性代码编译 模块化JavaScript打包 支持不同文件类型的资源模块 打包工具：解决前端整体的模块化，并不单指JavaScript模块化 二、模块打包工具概要 核心： 模块打包器（Module bund
webpack安装入门（1）
小程序博客专栏
06-08 308
webpack英文网站https://webpack.github.io/ 中文网站 https://www.webpackjs.com/concepts/entry-points/ webpack有什么用： es6的语法转化为es5浏览器可读的–（需要借助babel） vue、react等可以直接编译 css可以用less、sass等语法并自动补全浏览器的兼容问题。 压缩文件和图片。（压缩图片效果不好） 1，安装node和npm 在node官网下载node应用，官网地址为：http:/
linux 的ss看进程号,linux ss命令详解
weixin_30955739的博客
04-28 2636
ss 是 Socket Statistics 的缩写。ss 命令可以用来获取 socket 统计信息，它显示的内容和 netstat 类似。但 ss 的优势在于它能够显示更多更详细的有关 TCP 和连接状态的信息，而且比 netstat 更快。当服务器的 socket 连接数量变得非常大时，无论是使用 netstat 命令还是直接 cat /proc/net/tcp，执行速度都会很慢。ss 命令利...
webpack（4版本）使用
qq_60976312的博客
02-15 1661
webpack（4版本）使用
webpack4
最新发布
qq_38210427的博客
05-16 453
为了让浏览器能够正确的解析, 我们需要使用 webpack 将我们的源代码进行打包。
Linux 下 ss 命令使用示例
热门推荐
Dai Yuwen的专栏
11-07 2万+
ss 命令
如何安装webpack4
yin_991的博客
11-25 1626
本文主要讲解如何安装webpack4。 所使用系统是mac，直接使用系统自带的终端输入指令安装，window系统的读者安装方法大同小异，可以先安装git再在git bash里面输入指令安装。 1、先安装node npm 查看版本 node --version npm --version 查看版本，如果显示版本，那么就说明你电脑安装好了node，安装了node那么npm也会有，因为no...
vue 仿二手交易app_项目vue2.0仿外卖APP（二）
weixin_40008339的博客
12-19 295
vue-cli开启vue.js项目Vue.js开发利器vue-cli，是vue的脚手架工具。在工地上，脚手架是工人搭建好的架子，能够帮助工人们作业；在技术圈，脚手架就是来帮助我们编写好基础的代码的工具。Vue-cli就是帮助我们写好vue.js基础代码的工具。使用Vue.js，当你构建一个原型的时候，你所需要做的通常就是通过 把Vue.js引入进来，然后就完事了。但是真实情况往往不是这样的。当我...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值