首先，創建一個新的檔案夾，
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寫出的代碼，完成，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/347154.html
標籤：其他