JavaScript webpack5配置及使用基本介绍

下面我来详细讲解一下“JavaScript webpack5配置及使用基本介绍”的攻略。

1. 简介

Webpack是一个打包工具，它通过分析模块之间的依赖关系，将多个模块打包成一个或多个bundle文件，常用于前端项目的构建过程中。Webpack5是Webpack的最新版本，新增了很多功能和优化。

2. 安装和基本使用

先来安装Webpack和Webpack CLI:

npm install webpack webpack-cli -g

在项目中安装：

npm install webpack webpack-cli --save-dev

然后创建一个简单的JavaScript项目：

mkdir my-app
cd my-app
npm init -y
touch index.js

在index.js文件中输入以下内容：

console.log('Hello World!');

在项目根目录下创建一个webpack.config.js文件：

touch webpack.config.js

在webpack.config.js中定义入口文件和输出文件：

const path = require('path');
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

打包项目：

webpack --config webpack.config.js

运行index.html文件，引入bundle.js文件，控制台将输出Hello World!。

3. 资源打包和加载器

Webpack可以打包多种类型的文件，例如CSS、图片、字体等。使用不同的加载器来解析这些文件。
安装css-loader和style-loader：

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

修改webpack.config.js文件，添加加载器：

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

在index.js文件中添加CSS：

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

在根目录新建style.css文件：

body {
  background-color: blue;
}

打包项目：

webpack --config webpack.config.js

运行index.html文件，页面的背景色变成了蓝色。

4. 插件

Webpack插件用于增强Webpack的功能，例如压缩、合并等。常用的插件有UglifyJS和CopyWebpackPlugin。
安装uglifyjs-webpack-plugin和copy-webpack-plugin：

npm install uglifyjs-webpack-plugin copy-webpack-plugin --save-dev

修改webpack.config.js文件，添加插件：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new UglifyJsPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        { from: 'public', to: 'public' },
      ],
    }),
  ],
};

UglifyJsPlugin用于压缩JS代码，CopyWebpackPlugin用于复制文件夹。
在根目录下创建一个public文件夹，并在其中新建一个test.txt文件。
打包项目：

webpack --config webpack.config.js

运行index.html文件，控制台将输出Hello World!，public/test.txt文件也被复制到了dist/public/test.txt。

以上就是JavaScript webpack5配置及使用的基本介绍，希望对你有所帮助。