webpack学习–webpack经典7分钟入门教程

要学习webpack，建议可以按照以下步骤逐步学习：

第一步：安装node.js和npm

Webpack是一个基于Node.js的打包工具，因此我们需要先安装Node.js和npm。在命令行中输入以下命令即可：

node -v  // 查看当前已经安装的Node.js版本
npm install -g npm  // 更新npm版本

第二步：初始化项目

在命令行中进入项目目录，输入以下命令初始化一个新的npm项目：

npm init

按照提示填写相关信息，即可初始化成功。

第三步：安装Webpack

输入以下命令安装Webpack：

npm install webpack webpack-cli --save-dev

这里我们同时安装了webpack和webpack-cli，它们是webpack的核心依赖。

第四步：创建项目结构

在项目目录下创建一个src文件夹和一个dist文件夹，src文件夹中放置源代码，dist文件夹中放置打包后的代码。

第五步：编写源代码

在src文件夹中创建一个index.js文件，编写以下代码：

function hello() {
  console.log('Hello, webpack!');
}

hello();

第六步：创建webpack配置文件

在项目根目录下创建一个webpack.config.js文件，编写以下配置：

const path = require('path');

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

这里我们指定了入口文件(index.js)和输出文件(bundle.js)的路径，同时也指定了输出文件的目录(dist)。

第七步：执行打包命令

在命令行中运行以下命令进行打包：

npx webpack

这里我们使用了npx命令直接调用项目内的webpack命令。

示例说明一

假设我们的项目需要使用jQuery库，我们可以通过以下步骤将jQuery打包到我们的项目中：

1. 在命令行中执行以下命令安装jQuery库：

npm install jquery --save

1. 在index.js中引入jQuery：

```js
import $ from 'jquery';

$(document).ready(() => {
$('h1').text('Hello, webpack!');
});
```

1. 在webpack.config.js中修改配置，将jQuery的依赖加入到配置文件中：

```js
const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
options: '$'
}
]
}
]
},
};
```

这里我们加入了一个module节点，用来指定webpack打包时需要进行的处理过程。

在rules节点中，我们定义了一条规则，指定了jquery模块的处理方式：

• test：用来指定需要处理的模块。这里我们使用了require.resolve函数获取了jQuery的模块路径。

• use：用来指定模块的处理方式。这里我们使用了expose-loader插件，用来将jQuery模块暴露到全局变量$上。

• 重新执行打包命令：

npx webpack

这样就将jQuery打包到了我们的项目中，并可以在代码中直接使用$变量调用jQuery的相关方法。

示例说明二

假设我们需要使用CSS样式表，并将它打包到我们的项目中，我们可以通过以下步骤实现：

1. 在命令行中执行以下命令安装css-loader和style-loader：

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

1. 在src文件夹中创建一个style.css文件，并加入以下样式代码：

css
h1 {
color: red;
}

1. 在index.js中引入style.css：

```js
import './style.css';

function hello() {
console.log('Hello, webpack!');
}

hello();
```

1. 在webpack.config.js中修改配置，添加CSS模块的处理方法：

```js
const path = require('path');

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

在rules节点中，我们添加了一条新的规则，用来处理CSS模块。

• test：用来指定需要处理的模块。这里我们使用了一个正则表达式，指定需要处理的文件类型为.css。

• use：用来指定模块的处理方式。这里我们使用了两个loader，分别是style-loader和css-loader。它们的作用依次为将CSS样式表打包到JS文件中，并将样式表插入到HTML页面中。

• 重新执行打包命令：

npx webpack

打包完成后，在dist目录中可以看到生成的bundle.js文件和index.html文件。打开index.html文件即可看到页面中的效果。

以上就是一个完整的webpack入门教程，其中包含了安装Node.js和npm、初始化项目、安装Webpack、创建项目结构、编写源代码、创建webpack配置文件、执行打包命令等7个步骤，同时也提供了两个示例，帮助大家更好的理解webpack的基本使用方法。