webpack下载和使用,对一个项目进行打包的示例

一.下载

安装命令:

npm install  --save-dev webpack
npm install  --save-dev webpack-cli

若安装成功通过命令

webpack -v

可以查到版本号

二.如何对一个项目进行打包

1.首先准备一个待打包的项目

新建modules文件夹和文件夹下的hello.js和main.js文件
其中,
hello.js

// 使用exports暴露接口给main.js
exports.say=function(){
  alert("hello~")
}

main.js

// 在vue项目中使用导包import引用接口
// 引入
var hello=require("./hello.js")//文件格式可以省略
// 调用
hello.say();

2.在modules项目的同一个父文件夹下手动创建配置文件

webpack.config.js

const path = require('path')//Node.js内置模块

//当使用webpack打包的时候，webpack会自动去项目根目录下寻找webpack.config.js这个配置文件，加载里面的配置，根据配置选项进行打包
module.exports = {
//打包的入口js文件，也就是说你需要在这个main.js文件中引入其他需要一起打包的js文件
entry: './modules/main.js',
output: {
filename: 'result.js',//输出的文件，文件名自定义
    path: path.resolve(__dirname, './dist'), //输出文件的路径，可以不用改
    filename: 'result.js'
    }
}

3.保存后在配置文件的地址栏使用cmd输入命令webpack

打包成功后生成
dist文件夹下的result.js文件

4.验证是否打包成功

在dist文件下创建inde.html,并引用result.js
输出成功
项目目录: