Webpack4 配置最全攻略-JavaScript中文网-JavaScript教程资源分享门户

Webpack是一个模块打包工具，它的主要功能是将代码打包成一个或多个文件，以减少HTTP请求的数量，同时还支持各种各样的模块化系统。Webpack4是Webpack的最新版本，它提供了更多的功能和优化，使得我们可以更加高效地构建前端项目。

安装Webpack4

在开始配置Webpack4之前，我们需要先安装它。我们可以通过以下命令来进行安装：

npm install webpack webpack-cli --save-dev

其中，webpack是Webpack的核心库，webpack-cli是Webpack的命令行工具。

基本配置

在我们开始实际配置Webpack4之前，我们需要先了解一些Webpack4的基本配置。

入口文件

Webpack4的入口文件是指Webpack4将会从哪个文件开始打包。我们可以通过以下方式来指定入口文件：

module.exports = {
  entry: './src/index.js'
};

这里，我们将入口文件设置为./src/index.js。

输出文件

Webpack4的输出文件是指Webpack4将会把打包后的文件输出到哪个目录下。我们可以通过以下方式来指定输出文件：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

这里，我们将输出文件设置为bundle.js，并将它输出到./dist目录下。

模式

Webpack4提供了两种模式：development和production。在开发模式下，Webpack4会启用一些开发工具，例如sourcemap，以帮助我们更容易地进行调试。而在生产模式下，Webpack4会启用一些优化功能，例如代码压缩，以帮助我们更好地优化代码。我们可以通过以下方式来指定模式：

module.exports = {
  mode: 'development'
};

这里，我们将模式设置为development。

高级配置

除了基本配置之外，Webpack4还提供了许多高级配置选项，以帮助我们更好地优化我们的项目。

Loader

Webpack4支持使用Loader来处理各种不同类型的文件。例如，我们可以使用babel-loader来处理ES6代码：

-- -------------------- ---- -------
-------------- - -
  ------- -
    ------ -
      -
        ----- --------
        -------- ---------------
        ---- -
          ------- --------------
        -
      -
    -
  -
--展开代码

这里，我们使用babel-loader来处理所有以.js结尾的文件。

Plugin

Webpack4还支持使用Plugin来进行各种不同的优化。例如，我们可以使用CleanWebpackPlugin来在每次打包之前清空输出目录：

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin()
  ]
};

这里，我们使用CleanWebpackPlugin来清空输出目录。

DevServer

Webpack4还支持使用DevServer来启动一个本地开发服务器。例如，我们可以使用以下配置来启动一个本地服务器：

module.exports = {
  devServer: {
    contentBase: './dist',
    port: 8080
  }
};

这里，我们启动一个本地服务器，它会将./dist目录下的文件作为静态文件服务，同时监听8080端口。

总结

以上就是Webpack4的配置最全攻略。在实际开发中，我们可以根据自己的需要来进行配置，以达到最佳的优化效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/660f8eced10417a22201bd7e

Webpack4 配置最全攻略