webpack打包步骤以及自己遇到的一些问题

最新推荐文章于 2023-08-31 14:05:16 发布

D-742

最新推荐文章于 2023-08-31 14:05:16 发布

阅读量306

点赞数

文章标签： webpack javascript vue.js

本文链接：https://blog.csdn.net/qq_64210892/article/details/130772895

版权

webpack打包

重点关注：

entry 入口
output 输出
loader 处理
plugins 插件
mode 模式

流程：

安装
```
package.json -- npm init   
//初始化包描述文件

webpack --npm install webpack webpack-cli -g
```
webpack-cli 是执行 webpack 的工具。webpack 4.x 版本以后，剥离出了 webpack-cli ，所以webpack包和 webpack-cli包，需要都安装，但是webpack-cli不是必须的，如vue源码，就替换为了自己的cli，不需用webpack-cli

配置webpack.config.js

导入插件：
1. VueLoaderPlugin
  
  解析和转换.vue文件，提取出其中的逻辑代码，样式代码以及HTML模板，再分别将它们交给对应的loader去处理。
2. html-webpack-plugin
  
  用于编译 Webpack 项目中的 html 类型的文件
3. mini-css-extract-plugin
  
  这个插件可以生成css文件，并在html中以<link>方式进行引入
  代码
入口与出口

一个问题：

webpack编译成功，没有任何的报错或警告，但是就是没有生成的文件。
原因是我在dist前面写了一个/

因为 Node.js 中，__dirname 总是指向被执行 js 文件的绝对路径，path.resolve() 方法会将传入的路径解析为绝对路径，如果在调用 path.resolve() 时传递了斜杠（/），webpack就会找不到这个文件夹

配置loader处理

  module: {
  rules: [
    {
      test: /\.vue$/,
      use: "vue-loader",
    },
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"],
    },
    {
      test: /\.(png|jpe?g|gif)$/,
      type: "asset",
      generator: {
        filename: "assets/img/[hash][ext]",
      },
    },
  ],
 },

mode

告知 webpack 使用哪种模式的内置优化

有三种

development、production、none

开发的时候可以用development，打包更快；

发布上线的时候可以用production，体积更小

none 没有做内置优化
我的整个文件：

  const path = require("path"); //Node.js内置模块
  const { VueLoaderPlugin } = require("vue-loader");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const miniCssExtractPlugin = require('mini-css-extract-plugin');
  
  
  module.exports = {
    entry: "./src/main.js", //配置入口文件
    output: {
      path: path.resolve(__dirname, 'dist'), //输出路径，__dirname：当前文件所在路径
      filename: "Bundle.js", //输出的文件名称
      clean:true,//是否清空原有文件
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: "vue-loader",
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
        {
          test: /\.(png|jpe?g|gif)$/,
          type: "asset",
          generator: {
            filename: "assets/img/[hash][ext]",
          },
        },
      ],
    },
    plugins: [
  
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "public/index.html"),
      }),
      new miniCssExtractPlugin({
        filename: "./css/[name].[contenthash].css",
    }),
    ],
    mode: "development", // 设置mode   development为开发环境，production为生产环境
    
  };