webpack打包应用，并用babel转换es6代码

最新推荐文章于 2024-09-23 09:42:46 发布

一颗大梅子

最新推荐文章于 2024-09-23 09:42:46 发布

阅读量204

点赞数

文章标签： node.js webpack babel

本文链接：https://blog.youkuaiyun.com/weixin_43572973/article/details/109574476

版权

本文介绍如何使用Webpack进行项目打包，并利用Babel将ES6代码转换为浏览器兼容的JS代码。主要内容包括项目初始化、基础文件创建、配置Webpack及Babel加载器以支持CSS和JS文件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建文件

mkdir webpack-demo && cd webpack-demo
npm init -y

2.创建基础文件

链接: link.
按照教程一一建立

目录结构：
webpack-demo
: + dist
bundle.js
index.html
: + src
index.js
: webpack.config.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>起步</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

index.js

[1, 2, 3].map((n) => {
    n + 1
    console.log(n)
});

3. 配置文件webpack.config.js

1.配置入口文件和出口文件

2.配置loader(按需)

npm install --save-dev style-loader
npm install --save-dev css-loader
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    }
                }
            }
        ]
    }
};

4.配置浏览器兼容性

package.json

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "not ie <= 11",
    "Android >= 4.0",
    "iOS >= 8"
  ],