（一看就会）vue使用query打包全过程

首先，创建一个新的文件夹。

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写出的代码，完成。