webpack使用

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 -y / npm init  

　　　　　　项目名不包含中文两者皆可用，包含中文只能使用 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文件

 -----------------------------------------------------------------------------------------------------------------------------

8 自动编译配置

　　8.1 安装 webpack-dev-server : npm i  webpack-dev-server -D

　　8.2 配置 package.json ：

{
  "name": "vuedemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server --open --port 8089 --contentBase ./ --hot"
  },
  "author": " 作者",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.3.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.0.1",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
　　"webpack": "^4.41.2"
  },
  "dependencies": {
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "vue": "^2.6.10",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.1.3"
  }
}

　　　　scripts : 表示是npm的命令 执行方式 ： npm run XXX  如 ： npm run dev / npm run test

　　　　"dev": "webpack-dev-server --open --port 8089 --contentBase ./ --hot" : 
　　　　　　参数含义 ： open : 启动 npm run  dev 命令后，会自动在浏览器中打开首页 localhost:8089/index.html  默认是 index.html
　　　　　　　　　　port : 服务器打开首页的端口号 
　　　　　　　　　　contentbase: 首页所在目录  ./ ：表示项目根目录
　　　　　　　　　　hot : 热部署

 　　8.3 运行命令 ： npm run dev  ：此命令会运行一个服务器（webpackServer）

　　8.4 在首页引入的js文件 ： <script type="text/javascript" src="bundle.js"></script>  此文件并不存在磁盘中，而是在内存中，它不是dist目录下的js文件

　　8.5 配置完成之后，此服务器会自动热部署项目，不需要手动编译Js文件了。