初始化一个新的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
的文件文章来源:https://www.toymoban.com/news/detail-820094.html
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'
}
};
步骤六:
打包项目:文章来源地址https://www.toymoban.com/news/detail-820094.html
npm run build
到了这里,关于Webpack打包简单的js文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!