Webpack4.0 入门实践教程

Webpack是一个现代JavaScript应用程序的静态模块打包工具。它可以将许多模块按照依赖顺序打包成一个或多个文件。在我们开始使用Webpack之前，需要先安装Node.js与npm。

安装

npm install webpack webpack-cli --save-dev

Webpack分为多种模式，可以使用配置文件或者命令行参数选项进行设置。我们可以在package.json中的scripts字段中配置webpack命令：

"scripts": {
  "build-dev": "webpack --mode development",
  "build-prod": "webpack --mode production"
}

上述配置中，build-dev是使用开发模式构建，在开发模式下会添加调试信息。build-prod则是使用生产模式构建，此时会启用代码压缩。

基本配置

Webpack的默认入口文件是./src/index.js，默认的出口文件是./dist/main.js。

在./src/index.js中，我们可以编写一些代码，例如：

alert("Hello, World!");

接着，在./dist/index.html中引入main.js文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Webpack4.0</title>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>

这样，我们就可以在浏览器中看到弹窗输出Hello, World!了。

使用加载器

Webpack除了可以自动处理JavaScript模块，还可以支持处理其他非JavaScript模块，比如CSS、图片等资源。

处理CSS文件

首先，我们需要安装style-loader和css-loader。

npm install style-loader css-loader --save-dev

接着，在Webpack的配置文件webpack.config.js中添加module字段：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ]
      }
    ]
  }
};

最后，在入口文件进行引用即可：

import './style.css';

处理图片文件

首先，我们需要安装file-loader和url-loader。

npm install file-loader url-loader --save-dev

接着，在Webpack的配置文件webpack.config.js中添加module字段：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader',
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
};

这里的url-loader可以将文件转换成base64编码放到CSS文件中，从而减少HTTP请求次数。

最后，在入口文件中引用图片：

import imgSrc from './img.png';
const img = document.createElement('img');
img.src = imgSrc;
document.body.appendChild(img);

总结

以上是Webpack入门实践的简单示例，当然Webpack还有更多更强大的功能，比如代码分离、懒加载、插件等。希望通过本教程的学习，能让大家对Webpack有更深刻的理解。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：webpack4.0 入门实践教程 - Python技术站

webpack4.0 入门实践教程

Webpack4.0 入门实践教程

安装

基本配置

使用加载器

处理CSS文件

处理图片文件

总结

相关文章