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日

相关文章

  • Vue-cli@3.0 插件系统简析

    Vue-cli@3.0 插件系统简析 在Vue-cli@3.0之后,Vue-cli的插件系统得到了很大的改进。通过Vue-cli的插件系统,我们可以扩展Vue-cli的能力,定制自己的项目需求。 插件注册 要注册一个Vue-cli的插件,我们需要做以下几个步骤: 创建一个npm包,其中必须包含一个名为generator的文件夹。该文件夹中,必须有一个gene…

    css 2023年6月9日
    00
  • javascript 表格排序和表头浮动效果(扩展SortTable)

    下面我将为你详细讲解“javascript 表格排序和表头浮动效果(扩展SortTable)”的攻略。 什么是SortTable SortTable 是一个 JavaScript 组件,能够对网页中的表格进行排序。它只需要在表格所在的 HTML 文件中添加一个脚本并在 HTML 表格元素中设置表头即可。在表头上单击,用户可以将表格按列排序。 表格排序 以下是…

    css 2023年6月9日
    00
  • VS2019怎么设置CSS的默认属性?

    在VS2019中设置CSS的默认属性可以提高开发效率,以下是详细的设置步骤: 打开Visual Studio 2019,创建一个新的Web项目。 在Solution Explorer中右键单击项目名称,选择“Add” -> “New Item”。 在“Add New Item”对话框中选择“Web” -> “Style Sheet”,并将文件命名…

    css 2023年5月18日
    00
  • js+css实现三级导航菜单

    以下是详细的js+css实现三级导航菜单的攻略: 1. 先决条件 在开始之前,你需要具备以下技能: HTML 基础 CSS 基础 JavaScript 基础 2. HTML 结构 我们首先需要在 HTML 中构建出三级导航菜单的基本结构。结构如下: <nav> <ul> <li><a href="#&quo…

    css 2023年6月10日
    00
  • 使用D3.js制作图表详解

    使用D3.js制作图表可以分为以下几个步骤: 步骤一:安装D3.js 首先需要安装D3.js。可以通过官方网站下载或使用npm安装。 npm install d3 步骤二:准备数据 在制作图表前,需要准备好需要展示的数据。D3.js可以处理各种形式的数据,包括数组、json等。 步骤三:选择元素与绑定数据 在D3.js中,可以使用select方法选择指定元素…

    css 2023年6月10日
    00
  • CSS position属性absolute relative等五个值的解释

    下面是关于CSS position 属性及其五个值的详细讲解: 1. 什么是 position 属性 CSS position 属性指定一个元素在文档中的位置方式。这个属性可以控制元素的位置方式,并且会影响元素的显示效果。 2. position 属性的五个值 CSS position 属性有五种取值,分别为 static(默认值)、relative、abs…

    css 2023年6月9日
    00
  • 分享7个你可能不认识的CSS单位

    CSS 单位是指在 CSS 中用来表示长度、宽度、高度、字体大小等的单位。常见的 CSS 单位有 px、em、rem、vh、vw 等。除了这些常见的单位,还有一些不太常见的单位,本攻略将分享 7 个你可能不认识的 CSS 单位,包括基本概念、实现方法、注意事项和示例说明。 1. ch ch 是 CSS 中的一个相对单位,表示数字“0”的宽度。例如,如果字体大…

    css 2023年5月18日
    00
  • 纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)

    本篇攻略将为大家详细介绍如何通过纯CSS实现六边形(蜂窝)导航效果,同时支持hover以及兼容不同浏览器。以下是具体的步骤: 步骤一:准备HTML和CSS基础代码 首先,我们需要编写HTML代码,创建一个六边形导航菜单,代码如下: <div class="hexagon-wrap"> <div class="h…

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