webpack使用

Posted 2021-03-24 傻逼二货

1.node.zip 安装

　　1.1 再node目录里添加两个文件目录（名称随意） ： node-cache（全局缓存目录）；node-global（全局模块目录）

　　1.2 配置环境变量  ： D:soft odeJs ode（node目录）  ； D:soft odeJs ode ode-global   （去模块模块目录）

　　1.3 通过 命令指定 全局模块目录和全局缓存目录 ： 

　　　　npm config set prefix "F:Program Files ode-v8.11.3-win-x64 ode-global"
　　　　npm config set cache "F:Program Files ode-v8.11.3-win-x64 ode-cache"

　　安装完成 npm -v 查看版本

2. 配置 nrm( node仓库的地址集)

　　2.1 安装 nrm  : npm install nrm -g  (-g : 表示全局安装)

　　　　nrm ls ：查看可用的node仓库

　　2.2 设置仓库 ： nrm use taobao（使用淘宝镜像作为node仓库）

3. 安装模块：

　　3.1 npm  install  npm -g  (更新npm ：npm存在就是更新，不存在就是安装  )

　　3.2 npm  install webpack -g 

　　3.3 npm install webpack-cli  -g

4. webpack项目构建。

　　4.1. 在项目根目录里执行命令 ： npm init 

　　4.2 项目根目录里，安装webpack项目依赖 ：

　　　　npm install webpack --save-dev / npm  i  webpack -D( 简写 )

　　4.3 项目根目录下，创建 webpack.config.js 配置文件

const path=require(‘path‘);
module.exports ={
    //入口文件
    entry: path.join(__dirname,‘./index.js‘),
    //出口文件
    output:{
        path:path.join(__dirname,‘./dist‘),
        filename:‘bundle.js‘
    }
}

 

5. 此时就可以编译js文件了。

　　每一次更新js要执行命令 ： webpack     : 主要是将输入文件（index.js）转成输出文件(bundle.js)

　　再主页面引入bundle.js即可。

6. 额外下载其他的模块 ：

　　6.1 在项目根目录下执行以下命令 ： npm install ‘XXXX‘;

　　　　　　npm install  ‘jquery‘

　　　　　　npm install ‘vue‘

　　　　　　npm install ‘ bootsrtap‘

　　6.2 在index.js 引入下载的js :  import $ from ‘jquery‘;  

　　　　　　　　　　　　　　　import bootstrap  from  ‘bootstrap‘

 

7. 在项目根目录下的 package.json 是npm 的配置文件，其中可以看见刚刚引入的Js文件