Webpack和Babel的基本使用-编程入门课：Javascript从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：Javascript从入门到实战

Webpack和Babel是现代JavaScript应用程序开发中最常用的工具之一。Webpack是一个模块打包工具，它将你的应用程序代码和依赖项打包成一个或多个捆绑包。而Babel是一个转换器，它可以将新版JavaScript语法转换为旧版JavaScript语法，以确保应用程序可以在旧版浏览器中运行。下面是它们的基本使用方法。

Webpack基本使用

Webpack需要一个配置文件来指定打包规则和入口文件。我们可以创建一个webpack.config.js文件来配置Webpack。

webpack.config.js:

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

module.exports = {
  entry: './src/index.js', // 入口文件
  output: { // 输出文件
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};
```
上面的配置文件指定了入口文件和输出文件的路径。现在，我们需要安装Webpack和它的CLI工具。

```
npm install webpack webpack-cli --save-dev
```
现在我们可以使用Webpack命令来打包我们的应用程序。

```
npx webpack
```
这将执行Webpack并生成一个名为bundle.js的文件，其中包含我们应用程序的所有代码和依赖项。

Babel基本使用

Babel是一个转换器，它可以将新版JavaScript语法转换为旧版JavaScript语法。例如，Babel可以将ES6语法转换为ES5语法，以确保应用程序可以在旧版浏览器中运行。

首先，我们需要安装Babel和一些Babel插件。

```
npm install @babel/core @babel/cli @babel/preset-env --save-dev
```
现在，我们可以创建一个.babelrc文件来配置Babel。在这个文件中，我们指定了要使用的Babel插件和预设。

.babelrc:

```
{
  "presets": [
    "@babel/preset-env"
  ]
}
```
现在，我们可以使用Babel命令来将我们的代码转换为旧版JavaScript语法。

```
npx babel src --out-dir lib
```
这将把src目录中的所有JavaScript文件转换为lib目录中的旧版JavaScript文件。

Webpack和Babel的结合使用

现在，我们已经了解了Webpack和Babel的基本使用方法。让我们看看如何将它们结合起来，以便我们可以使用最新的JavaScript语法并打包我们的应用程序。

首先，我们需要安装一些Babel插件和Webpack插件。

```
npm install @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime babel-loader @babel/runtime-corejs3 core-js@3 webpack-dev-server --save-dev
```
我们需要修改我们的webpack.config.js文件，以便在Webpack中使用Babel。我们可以使用babel-loader来将我们的应用程序代码转换为旧版JavaScript语法。

webpack.config.js:

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

module.exports = {
	entry: './src/main.js // 入口文件
	output: { // 输出文件
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	module: { // 模块
		rules: [ // 规则
			{
				test: /.js$/, // 匹配所有.js文件
				exclude: /(node_modules)/, // 排除node_modules目录
				use: {
					loader: 'babel-loader', // 使用babel-loader
					options: {
						presets: [
							'@babel/preset-env'
						],
						plugins: [
							'@babel/plugin-proposal-class-properties',
							'@babel/plugin-transform-runtime'
						]
					}
				}
			}
		]
	},
	devServer: { // 开发服务器
		contentBase: path.join(__dirname, 'dist'),
		compress: true,
		port: 9000
	}
};

```

上面的配置文件指定了使用`babel-loader`转换所有`.js`文件，并指定了要使用的Babel插件和预设。我们还设置了一个开发服务器，它将在本地主机的9000端口上运行。

现在我们可以使用Webpack命令启动开发服务器。

```bash
npx webpack serve --open
```
这将启动开发服务器并在浏览器中打开我们的应用程序。

小结