新手快速上手webpack4打包工具的使用详解

1. 什么是webpack

webpack是一个现代JavaScript应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

2. 安装webpack

在使用webpack前，我们需要先安装它。使用npm安装webpack可以通过以下命令完成：

npm install webpack webpack-cli --save-dev

3. 创建webpack的配置文件

在项目根目录下创建webpack的配置文件webpack.config.js。其中需要指定entry、output、module、plugins等选项。

以下是一个简单的webpack配置文件：

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [],
};

webpack会将src目录下的index.js打包成dist目录下的main.js。

同时，它还会处理css文件，将其打包到bundle中，使得我们可以在js中引入css文件。

4. webpack构建命令

当我们有了webpack配置文件之后，就可以使用webpack构建我们的项目了。使用以下命令就可以完成构建：

npx webpack --config webpack.config.js

5. 示例说明

下面我们通过两个示例来详细讲解webpack的使用。

示例一：打包React应用

首先，我们需要使用create-react-app来创建一个React的项目：

npx create-react-app my-app
cd my-app
npm start

接下来，我们需要在项目中安装webpack：

npm install webpack webpack-cli --save-dev

然后，我们需要创建webpack.config.js文件，并进行基本配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
        ],
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      inject: 'body',
    }),
  ],
};

在这个配置文件中，我们使用了babel-loader来处理React的jsx语法，同时使用了HtmlWebpackPlugin来生成HTML文件。

最后，我们可以使用以下命令来构建React项目：

npx webpack --config webpack.config.js

示例二：打包Vue应用

和React应用类似，我们可以使用vue-cli来创建Vue的项目：

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm run dev

然后，我们需要安装一些必要的webpack插件：

npm install vue-loader vue-template-compiler --save-dev
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D

接下来，我们需要创建webpack.config.js文件，并进行基本配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '',
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]',
        },
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"',
      },
    }),
  ],
};

在这个配置文件中，我们使用了vue-loader来处理vue文件，同时使用了HtmlWebpackPlugin来生成HTML文件。

最后，我们可以使用以下命令来构建Vue项目：

npx webpack --config webpack.config.js

6. 总结

这个攻略详细讲解了webpack的基本使用方式，同时通过两个示例介绍了webpack如何打包React和Vue应用。希望对初学者有所帮助。