前端小白入门webpack之基本使用

---

前言

这一篇我们一起来学习webpack的基本使用，文件目录的结构

一、webpack文件目录的创建

(1).src（source源码）：用于开发当中写的代码

(2).dist（distribution发布）：用户发布时候打包的代码

(3).main.js：程序的主入口

(4).index.html：程序基本页

补充：
CommonJS中导入导出规范
导出：

module.exports = {
  add
}

导入：

const { add } = require('文件相对路径/xxx.js')

ES6中导入导出规范
导出：

export {
  add
}

导入：

import { add } from '文件相对/xxx.js'

webpack打包指令

1.不配置时进行打包指令：

webpack ./src/main.js  ./dist/bundle.js

2.配置后进行打包指令：
(5).webpack.config.js（打包相关信息配置文件）
1)创建webpack.config.js

// CommonJS规范获取地址
const path = require('path')
// CommonJS规范导出打包指令
module.exports = {
  // 程序入口
  entry: './src/main.js',
  // 程序出口
  output: {
    //文件绝对路径，动态获取路径,动态拼接
    path: path.resolve(__dirname, 'dist'),
    // 打包后的名字
    filename: 'bundle.js'
  },
}

2)再到命令行初始node:
指令：

npm init

然后按照指令进行输入，一路回车
完成后会生成
(6).package.json：当前项目的相关信息
因为上面我们已经存在动态获取文件路径
所以现在我们继续安装依赖的包、库
3)再到命令行

npm install

4)现在我们就可以使用webpack这个指令直接打包

webpack

3.映射打包指令：

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "author": "",
  "license": "ISC"
}

我们到package.json中去配置映射
"build":"webpack"
然后我们就可以使用：
npm run build指令进行打包啦
该指令会再本地优先选择webpack，找不到再去全局找
4.安装本地webpack进行打包：
因为webpack我们电脑安装的是全局的,大家开发的环境不同，所以我们要进行本地webpack打包，这样拿到的项目是什么webpack我们就使用什么版本的webpack进行打包。
开发时依赖：需要webpack
运行时依赖：不需要webpack
本地安装webpack

npm install webpack@3.6.0 --save-dev(开发时依赖)

然后我们的package.json（关闭重新打开就会出现）中就会出现我们本地安装的webpack的版本:
开发时依赖的webpack

  "devDependencies": {
    "webpack": "^3.6.0"
  }

现在文件中就会多出
(7).node_modules：这些就是我们node的依赖
package.json中定义启动：
package.json的script的脚本在执行时，会按照一定顺序寻找命令对应的位置。
首先寻找本地的node_modules/bin路径中对应的命令。
如果没有找到，会去全局的环境变量中寻找。

这样webpack就实现了模块化开发和打包

---

总结

好的，本次我们就进行了webpack的基本使用的学习，难点在于指令的配置文件过多，多敲几遍过程就掌握理解啦！

今日推荐

工具：有道翻译词典，在线翻译