webpack 怎么引入js

Webpack 引入 JS 的方法、设置 entry 属性、使用 loaders、配置 plugins、优化打包输出

Webpack 是一个强大的模块打包工具，能够将各种资源（如 JavaScript、CSS、HTML 等）打包成一个或多个文件，从而优化网站的性能。在这个过程中，引入 JavaScript 文件是一个常见的需求。通过设置 entry 属性、使用 loaders、配置 plugins、优化打包输出可以实现高效的 JS 文件引入。以下将详细展开这几个方法，帮助你更好地理解和应用 Webpack。

一、设置 Entry 属性

在 Webpack 中，entry 属性用于指定应用程序的入口起点。这个入口起点告诉 Webpack 从哪里开始构建依赖关系图，从而确定需要打包的模块。

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

在上述配置中，entry 属性指向了 ./src/index.js 文件。Webpack 会从这个文件开始，递归地构建依赖关系图，最终打包成 bundle.js。

二、使用 Loaders

Loaders 是 Webpack 中用于转换模块的工具。它们可以在模块被加入依赖图之前对其内容进行预处理。例如，你可以使用 Babel loader 将现代 JavaScript 转换为 ES5，以便在旧浏览器中运行。

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

在这段代码中，Babel loader 被配置来处理所有 .js 文件（排除 node_modules 目录）。它使用 @babel/preset-env 预设来转换现代 JavaScript 语法。

三、配置 Plugins

Plugins 是 Webpack 的另一个强大功能。它们可以用于执行范围更广的任务，例如打包优化、资源管理和注入环境变量。常见的插件包括 HtmlWebpackPlugin 和 CleanWebpackPlugin。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

在这个配置中，CleanWebpackPlugin 用于在每次构建之前清理 dist 目录，而 HtmlWebpackPlugin 用于生成一个 HTML 文件，并自动将打包后的 JS 文件注入其中。

四、优化打包输出

为了进一步优化打包输出，可以使用 Webpack 提供的多种优化策略。例如，代码分割（Code Splitting）和缓存（Caching）是常用的优化方法。

代码分割

代码分割可以将应用程序分割成多个文件，从而实现按需加载，减少初始加载时间。

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist'
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

在这个配置中，splitChunks 选项被设置为 all，这将会将所有的模块分割成不同的文件。

缓存

为了利用浏览器缓存，可以使用 contenthash 作为文件名的一部分。当文件内容改变时，contenthash 也会改变，从而使浏览器重新加载新的文件。

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  optimization: {
    runtimeChunk: 'single'
  }
};

在这个配置中，runtimeChunk 被设置为 single，这样可以将运行时代码分割到一个单独的文件中，从而更好地利用缓存。

五、使用开发服务器

为了加速开发过程，Webpack 提供了一个开发服务器 webpack-dev-server。它可以实时监控文件变化，并自动刷新浏览器。

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

在这个配置中，devServer 选项被设置为监控 dist 目录，并启用了热模块替换（HMR），这可以在不刷新整个页面的情况下替换、添加或删除模块。

六、总结

通过以上几个步骤，你可以高效地在 Webpack 中引入 JS 文件。设置 entry 属性、使用 loaders、配置 plugins、优化打包输出是实现这一目标的关键。每个步骤都有其独特的作用和配置选项，可以根据具体需求进行调整。通过这些配置，你可以创建一个高效、可扩展的 Webpack 项目，满足现代 Web 开发的需求。