webpack简单入门（一）

环境：Windows 10

前提：安装node.js node -v 查看node.js是否安装

一、webpack的安装

1. cnpm安装（可不装）
   使用npm时下载速度可能较慢，可以使用国内淘宝镜像
   npm淘宝镜像
   
   找到使用说明:
   $ npm install -g cnpm --registry=https://registry.npm.taobao.org
   
   管理员cmd运行
   npm i -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v可查看是否安装
   
   cnpm可用于
   安装模块：cnpm i [module name]
   同步模块：cnpm sync connect

2. 全局安装webpack

   npm install --save-dev webpack
   或 npm i -g webpack
   
   ·其他命令
   npm install -g [email protected] 安装指定版本
   npm uninstall -g webpack 下载全局安装的webpack

3. 安装webpack-cli

   由于4.x版本将webpack和webpack-cli分开 需安装webpack-cli

   npm install -g webpack-cli

二、webpack的使用

1. 初始化

   创建文件夹，本人文件夹路径为D:/wepack_test（后面用根目录表示）
   D:\webpack_test > mkdir webpack_test

   ·进入该文件夹
   cd webpack_test

   对文件初始化，初始化过程会提问是否修改默认配置，最后yes
   npm init
   若无需修改默认配置，加-y跳过提问阶段
   npm init -y
   ·初始化后会在文件夹中生成一个package.json文件
   
   

2. 安装webpack
   此处安装是因为项目上线后环境中可能没有webpack

   ① 仅当前开发环境依赖，上线后无需依赖该模块
   npm install --save-dev [name] 或 npm i -D [name]
   ② 上线后仍需依赖该模块
   npm install --save [name] 或 npm i -S [name]
   ·此处我们使用①，安装完成后根目录会生成一个node_modules文件夹，存放所有模块。
   
   

3. 文件准备

   创建src文件夹
   根目录>mkdir src

   在src下新建app.js文件
   type nul>app.js

   编辑app.js
   console.log('Hello!');

   ·运行根目录>src> node app.js会输出 ‘hello!’
   
   

4. webpack配置

   ·根目录下新建webpack.config.js文件
   type nul>webpack.config.js
   
   配置

   const path = require('path');
   
   module.exports = {
   	mode : 'development',   //开发模式	
       entry : './src/app.js', //  ./为当前目录，不能省
       output:{
           path:path.resolve(_dirname,'dist'), // __dirname为当前目录，注意有两个"_"
           filename:'app.bundle.js' // 也可以'./app/app.js'，即为 dist/app/app.js，若不存在main文件夹会自动创建
       }
   }
   

   打包
   ①webpack 等同于 webpack -p
   -p指生产环境，会压缩app.bundle.js成一行
   ②webpack -d
   -d表示开发环境，app.bundle.js不压缩
   
   ·运行main.bundle.js
   根目录>node dist/app.bundle.js
   
   ·另外，每次改动main.js都需重新打包运行，可以使用–watch进行监听
   webpack --watch 或 webpack -d --watch
   停止监听ctrl+c
   
   

5. 如果有多个入口文件

   const path = require('path');
   
   module.exports = {
   	mode : 'development',   //开发模式	
       entry : {'
       	app:'./src/app.js',       // app为输出的文件名
           fn: './src/fn.js'
       } ,
       output:{
           path:path.resolve(_dirname,'dist'), //__dirname为当前目录
           filename:'[name].bundle.js' 
       }
   }
   

   ·打包后dist会生成app.bundle.js 和 fn.bundle.js
   
   
   补充——path.resolve 和 path.join的区别

   在根目录D:/webpack_test下测试

   path.resolve(__dirname,"a")
   // 输出：  D:\webpack_test\a
   path.resolve("a","b","c")
   // 输出：  D:\webpack_test\a\b\c
   path.resolve("/a","b","c")
   // 输出：  D:\a\b\c         resolve会把'/'当根目录
   path.resolve("a","/b","c")
   // 输出：  D:\b\c			
   
   path.join(__dirname,"a")
   // 输出：  D:\webpack_test\a
   path.join(__dirname,"/b")
   // 输出：  D:\webpack_test\b
   path.join("a","/b","c")
   // 输出：  a\b\c
   

   resolve把一个路径或路径片段的序列解析为一个绝对路径

   join把全部给定的 path 片段连接到一起作为路径