webpack的js打包_webpack打包js文件-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_68652823/article/details/129416680

文章详细介绍了如何使用Webpack对JS文件进行打包，包括创建文件、设置入口和出口文件、安装依赖、配置命令行以及解决错误。通过配置webpack.config.js文件和运行npm命令，将JS项目打包成bundle.js并引用到HTML中。

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

打包js文件[默认只能对js文件直接进行打包]

1，创建相应的文件【文件之间需要相应的依赖包】

/src/index.js

import bar from './bar';
bar();
console.log('index');

/src/foo.js

export default function a(){
    console.log('foo');
}

/src/bar.js

import a from './foo'
export default function bar() {
  console.log('bar');
  a();
}

2./index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="dist/bundle.js"></script>
</head>
<body>
    
</body>
</html>

2. 安装对应的包:

npm install webpack@4.32.2 webpack-cli@3.3.2 webpack-dev-server@3.5.1 -D-S

3.配置入口文件/出口文件

在根目录下创建webpack.config.js文件

const path = require('path');
            module.exports = {
                // 入口 - 打包的入口
                entry: './src/index.js',
                // 出口 - 打包输出的位置
                output: {
                    // path-打包之后输出的位置
                    path: path.resolve(__dirname, 'dist'),
                    // filename-打包之后的文件的名称
                    filename: 'bundle.js'
                }
            };

4.配置命令行

在package.json的scripts中配置

    "scripts": {
                "start": "webpack --config webpack.config.js --mode development"
            }

5.执行命令行

npm run start

6.error:03000086:digital envelope routines::initialization error报错解决方案

在vscode下执行

 $env:NODE_OPTIONS="--openssl-legacy-provider"

执行两次

webpack的js打包