首先,创建一个新的文件夹。
ctrl+shirt+y键,使用控制台(终端)
在控制台执行以下几步,导包,会有进度条要等待(一至六步都是在控制台写控制命令)
第一步:npm install -g webpack
npm install -g webpack
第二步:npm init //文件夹生成package.json
npm init
这里一直回车就行
第三步:npm install --save-dev webpack
//生成package-lock.json
这里可能要比较久,耐心等待
npm install --save-dev webpack
第四步:npm uninstall webpack-cli //卸载本地安装的
npm uninstall webpack-cli
第五步:npm install -g webpack-cli //全局安装
npm install -g webpack-cli
这里可能要比较久,耐心等待
第六步:npm install --save-dev webpack-cli
//把webpack-cli安装到devDependencies
npm install --save-dev webpack-cli
第七步:在文件下,创建src文件,src文件下有三个:index.html 、 index.js 、zz.js
第八步:npm install jquery 或者 npm install jquery --save
//这是安装jQuery,使用文件之前一定要安装jQuery
npm install jquery
第九步:在根文件夹下创建webpack.config.js,不是放在src文件夹下
在里面写代码,如下
const path=require("path");
const webpack = require('webpack');
module.exports={
//webpack打包的入口文件
entry:path.join(__dirname,"./src/zz.js"),
//webpack打包的出口文件
output:{
path:path.join(__dirname,"./dist"),
filename:"bundle.js"
},
mode : 'development'
}
第十步:在html和js文件下写代码
index.js
import $ from "jquery" //使用jQuery
$(function(){
alert('ss')
})
zz.js
//这是拿来引用文件的,避免还要在webpack.config.js里一个个添加转换jQuery文件
var $ = require("./index.js") //引用文件
index.html
在index.html里,添加打包好的js文件(这里引入的是生成的jQuery的地址)
<script src="/dist/bundle.js"></script>
第十一步:在package.json里添加 "dev":"webpack"
第十一步:ctrl+shirt+y键,打开控制台,输入 npm run dev
(会生成dist文件,里面有打包好的jQuery文件)
现在就完成打包了,然后在浏览器看一下效果。
输出了我们在js里用jQuery写出的代码,完成。