webpack4简单入门实例

针对“webpack4简单入门实例”的完整攻略,我会分为以下几个部分进行详细讲解:

1.什么是webpack
2.环境准备
3.webpack配置入门
4.样式加载及ES6转码入门
5.多页应用Webpack处理
6.插件及打包输出调整
7.示例说明
8.总结

一、什么是webpack

Webpack是一个模块打包器,通过分析模块之间的依赖关系,将所有模块打包成一个或多个文件。Webpack4主要包含四个核心概念:Entry、Output、Loader和Plugin。

Entry:指示Webpack应该从哪个模块开始创建依赖图。在webpack4中可以省略该属性,因为默认入口为./src/index.js。

Output:指定Webpack编译后打包的文件存放的位置、文件名等参数。

Loader:实现对不同类型的文件如何在Webpack编译过程中进行预处理。

Plugin:为Webpack扩展功能,如优化、压缩等。

二、环境准备

1.确保安装了Node.js,可以在命令行中输入npm -v 和node -v查看版本号。

npm -v
node -v

2.在本地新建一个项目目录,执行命令 cd 项目目录。

3.执行命令 npm init 初始化项目,生成package.json文件。

4.安装Webpack4和webpack-cli:npm install webpack webpack-cli -D。-D表示安装至devDependencies开发环境中。

5.准备工程文件夹结构,参考如下:

|-- src
|   |-- index.js // 入口JS文件
|   |-- style.css // 样式表
|   |-- assets // 静态资源
|-- dist // 打包后文件
|-- node_modules // 安装的依赖包
|-- package.json // Node.js 项目配置文件
|-- webpack.config.js // Webpack配置文件
|-- .gitignore // Git 版本控制忽略文件配置

三、webpack配置入门

1.在项目根目录下创建webpack.config.js文件:

const path = require('path') // 引入node中的path模块

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

2.在package.json文件中添加以下命令:

  "scripts": {
    "build": "webpack --config webpack.config.js"
  }

3.执行命令npm run build即可执行打包操作。

四、样式加载及ES6转码入门

1.安装相关的loader:

npm install style-loader css-loader postcss-loader autoprefixer babel-loader @babel/core @babel/preset-env -D

2.在webpack.config.js文件中添加以下配置:

const autoprefixer = require('autoprefixer') // 前缀
const path = require('path')

module.exports = {
  entry: './src/index.js', // 默认是 './src/index.js'
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: ['babel-loader'],
      },
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [autoprefixer()]
      }
    })
  ]
}

五、多页应用Webpack处理

1.新增index.html和about.html文件

2.新增index.js和about.js文件

3.webpack.config.js文件中添加以下配置:

module.exports = {
  entry: {
    // 分别打包index.js和about.js
    index: './src/index.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html'
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      template: './src/about.html'
    })
  ]
}

六、插件及打包输出调整

1.安装相关的插件:

npm install css-minimizer-webpack-plugin terser-webpack-plugin html-webpack-plugin -D

2.在webpack.config.js文件中添加以下配置:

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') // 压缩css
const TerserPlugin = require('terser-webpack-plugin') // 压缩js
const HtmlWebpackPlugin = require('html-webpack-plugin') // html plugin
const autoprefixer = require('autoprefixer') // 前缀
const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    // 分别打包index.js和about.js
    index: './src/index.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].[contenthash:8].bundle.js', // 将文件hash化,解决文件缓存问题
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: ['babel-loader'],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      template: './src/about.html',
      chunks: ['about']
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [autoprefixer()]
      }
    })
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          output: {
            comments: false,
          },
        },
      }),
    ],
    runtimeChunk: {
      name: 'runtime',
    },
  },
}

七、示例说明

1.编写index.js文件:

import './style.css'
console.log('Hello World!')

2.编写style.css文件:

h1 {
  display: flex;
  justify-content: center;
}

3.编写index.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack4 简单入门实例</title>
</head>
<body>
  <h1>Hello World!</h1>
  <script src="./index.bundle.js"></script>
</body>
</html>

4.编译:npm run build

5.在浏览器中打开index.html,可以看到“Hello World!”文字居中显示。

八、总结

以上就是对于“Webpack4简单入门实例”的详细讲解,内容涵盖了Webpack的核心概念、环境准备、webpack配置入门、样式加载及ES6转码入门、多页应用Webpack处理和插件及打包输出调整等方面。需要注意的是,Webpack的使用也是有一定门槛的,需要多加尝试和实践,才能真正掌握Webpack的使用技巧。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:webpack4简单入门实例 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • python中PyQuery库用法分享

    Python中PyQuery库用法分享 前言 PyQuery是一个类似jQuery的Python库,它能够非常方便地对HTML或XML文档进行解析和操作。本篇攻略将详细讲解PyQuery库的使用方法。 安装方法 PyQuery可以通过pip安装,命令如下: pip install pyquery 基本使用方式 假设我们要解析如下HTML代码: <htm…

    css 2023年6月9日
    00
  • 开启BootStrap学习之旅

    开启BootStrap学习之旅 1. 了解Bootstrap Bootstrap是一个开源的前端框架,由Twitter的前端工程师推出。它结合了HTML、CSS、JavaScript等多种技术,提供了一套强大的现代化网页模板和组件库,可以帮助我们快速构建漂亮、响应式的网页。 2. 下载并引入Bootstrap 去Bootstrap官网(https://get…

    css 2023年6月11日
    00
  • 使用CamanJS在Web页面上处理图像的技巧

    如何使用CamanJS在Web页面上处理图像 CamanJS是一款JavaScript图像处理库,可以用来在Web页面上处理图像以及进行滤镜的效果等操作,接下来将详细讲解如何使用CamanJS处理图像的技巧。 步骤一:引入CamanJS库 在HTML文档中,需要先引入CamanJS库,可以使用以下代码: <script src="//cdn.…

    css 2023年6月11日
    00
  • js实现拾色器插件(ColorPicker)

    实现一个拾色器插件(ColorPicker)主要涉及以下几个部分:HTML结构、CSS样式和JavaScript脚本。 HTML结构 在HTML中,我们需要创建一个颜色选择器的容器元素,以及一些控制颜色选择器的元素。一般来说,颜色选择器的容器是一个div元素,选择器的控制元素有颜色预览区、色调选择器、饱和度选择器、红、绿、蓝(RGB)颜色选择器以及确定和取消…

    css 2023年6月10日
    00
  • 基于jquery实现百度新闻导航菜单滑动动画

    以下是基于jQuery实现百度新闻导航菜单滑动动画的攻略: 一、设计导航菜单结构 首先,需要在HTML中设计出导航菜单的结构。具体而言,我们需要使用HTML <ul> 与 <li> 标签来实现导航菜单,并设置相应样式。 示例代码: <ul class="nav-menu"> <li class=&…

    css 2023年6月9日
    00
  • 罗技g502鼠标灵敏度怎么设置?

    罗技g502鼠标灵敏度设置攻略 如果你使用罗技g502鼠标,你可能想要调整它的灵敏度来适应你的游戏风格。在本文中,我们将提供罗技g502鼠标灵敏度设置的完整攻略。 步骤一:下载罗技G HUB软件 在你尝试调节罗技g502鼠标的灵敏度之前,你需要先下载并安装罗技G HUB软件。该应用程序可以让你轻松地自定义和控制你的罗技设备。你可以在罗技官网下载G HUB软件…

    css 2023年6月9日
    00
  • HTML标记第1/2页

    HTML标记第1/2页的完整攻略,分为以下几个步骤: 1. 了解HTML基础知识 HTML是网页开发基础语言,全称为超文本标记语言 (Hyper Text Markup Language) HTML标记由尖括号包围的元素 (elements) 构成,常见的元素包括标题 (h1~h6)、段落 (p)、链接 (a)、图片 (img)、列表 (ul/ol) 等等 …

    css 2023年6月10日
    00
  • ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

    下面是“ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项”的攻略: 1. 准备工作 首先,需要确保已经安装好了以下环境: .NET Framework 4.0及以上版本 Visual Studio 2012及以上版本 ASP.NET MVC 4.0及以上版本 Entity Framework 6.0及以…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部