如何使用Webpack打包js文件

小舟4232024-01-24 21:07

《Webpack打包简单的js文件》

初始化一个新的npm

步骤一：

初始化npm项目，创建一个package.json文件

复制代码

npm init -y

步骤二：

添加打包脚本：在scripts部分添加一个命令来运行webpack

复制代码

"scripts": {
    "build": "webpack --config webpack.config.js"
  },

步骤三：

安装Webpack

复制代码

npm install --save-dev webpack webpack-cli

步骤四：

创建一个简单的Javascript文件，比如src/index.js

复制代码

console.log('Hello,Webpack!');

步骤五：

配置Webpack，创建一个名为webpack.config.js的文件

复制代码

const path = require('path');   // 《引入path模块》如 join()、basename()、dirname()、extname() 等，

module.exports = {
  mode: 'development',  // 设置模式为开发模式，可以设置为 'production' 以启用压缩等优化
  entry: './src/index.js',  // 设置入口文件为 './src/index.js'
  output: {     //设置输出目录为 path.resolve(__dirname, 'dist')
    path: path.resolve(__dirname, 'dist'),  // 输出目录
    filename: 'bundle.js'   // 设置输出文件为 'bundle.js'
  }
};

步骤六：

打包项目：

复制代码

npm run build