webpack模块化打包

最新推荐文章于 2024-08-13 11:28:58 发布

wr_kobe

最新推荐文章于 2024-08-13 11:28:58 发布

阅读量594

点赞数

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/2301_76251603/article/details/130751917

版权

1、概念

webpack 是一个 JavaScript 应用程序的静态模块打包器，通过分析模块之间的依赖关系，将所有依赖打包成一个或多个文件，方便浏览器加载。

2、webpack打包 react 项目过程

1.安装 webpack 和 webpack-cli

npm i webpack webpack-cli --save-dev

2.安装 babel 相关依赖

npm i babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

3.配置 webpack.config.js 文件

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};

entry 表示打包的入口文件，output 表示打包后的文件输出路径和文件名。module.rules 中配置了项目使用的 loader，其中包括 babel-loader、style-loader、css-loader 和 file-loader 等

4.配置 .babelrc 文件

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

5.执行打包命令

npx webpack

执行打包命令后，webpack 会根据配置文件和入口文件，对项目进行打包，生成 dist 目录和 bundle.js 文件。
注意：由于 React 项目可能使用了一些第三方库和插件，因此在配置 webpack 和 babel 的 loader 时，需要根据实际情况进行修改和调整。

3、webpack打包 vue 项目过程

1.安装 webpack 和 webpack-cli

npm i webpack webpack-cli --save-dev

2.安装 vue-loader 和 vue-template-compiler

npm i vue-loader vue-template-compiler --save-dev

3.安装 babel-loader 和相关依赖

npm i babel-loader @babel/core @babel/preset-env --save-dev

4.配置 webpack.config.js 文件

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        },
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images',
        },
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],
};

上述代码中，entry 表示打包的入口文件，output 表示打包后的文件输出路径和文件名。module.rules 中配置了项目使用的 loader，其中包括 vue-loader、babel-loader、vue-style-loader、css-loader 和 file-loader 等。plugins 配置了 VueLoaderPlugin，用于解析 Vue 的单文件组件。

5.配置 .babelrc 文件

{
  "presets": ["@babel/preset-env"]
}

上述代码中，配置了 babel 的预设，用于处理 ES6 语法.

6.编写 Vue 单文件组件

<template>
  <div>
    <h1>{{ message }}</h1>
    <img :src="logo" />
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello World!',
      logo: require('./assets/logo.png'),
    };
  },
};
</script>
<style>
h1 {
  color: blue;
}
</style>

7.在 main.js 中引入 Vue 单文件组件

import Vue from 'vue';
import HelloWorld from './HelloWorld.vue';
new Vue({
  el: '#app',
  components: { HelloWorld },
  template: '<HelloWorld />',
});