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的使用技巧。

阅读剩余 81%