如何使用Webpack打包js文件

发布时间:2024年01月20日

《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
文章来源:https://blog.csdn.net/xiaozhou4233/article/details/135711919
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。