webpack配置基础[01] -webpack快速开始

从本质上讲，webpack是一个javascript应用的静态模块打包工具

不仅仅是JavaScript，CSS,图片,json等等在webpack中都可以被当做模块来使用。
webpack需要依赖node,npm环境来安装和管理各种包

安装

首先要下载node和npm(node包管理工具)

这里我暂时使用的是webpack3.6.0

• 全局安装:

npm install webpack@3.6.0 -g

• 本地安装(开发时依赖):

npm install webpack@3.6.0 --save -dev

打包commonJS

//a.js
//commonJS

function add(num1, num2) {
  return num1 + num2;
}

function mul(a, b) {
  return a * b;
}

module.exports = {
  add,mul 
}

//commonJS
main.js
const {add,mul} = require("./a.js")
console.log(add(2,3));

C:\yourfile > webpack ./src/main.js ./dist/bundle.js

打包ES6

//ES6
//b.js
let firstName = "Sam";
let lastName = "White"

function getFullName() {
  return firstName + '  '  + lastName;
}
export {
  firstName,
  lastName,
  getFullName
}

//ES6
//main.js
import {firstName,lastName,getFullName} from "./bbb.js"
console.log(getFullName(firstName,lastName));

在html中引用

<script src="./dist/bundle.js"></script>

用webpack.config.js来对webpack进行配置

使用路径在控制台打包十分麻烦,可以对webpack进行配置,从而不用路径地输入webpack进行打包:

文件结构

//***wrong*** webpack.config.js
module.exports = {
  entry: "./src/main.js",
  output: {
    path: './dist',//相对路径
    filename: ''
  },
}

如果这样写的话会报错,因为webpack需要一个绝对路径来进行输出,需要用到node中的path模块

> npm init

//webpack.config.js
const path = require('path')//导入node中的path包
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname/*当前文件路径*/,'dist') , //进行路径拼接
    filename: 'boundle.js'
  },
}

此时会在目录生成一个packge.json,里面包含了工程所有的本地依赖,这时候我们就可以用webpack命令进行快乐的打包了:)

C:\Users\Admin\Desktop\study\program_files\html\HTML\webpack\init> webpack
Hash: a063d679467ec76ae2da
Version: webpack 3.6.0
Time: 45ms
     Asset     Size  Chunks             Chunk Names
boundle.js  3.74 kB       0  [emitted]  main
   [0] ./src/main.js 186 bytes {0} [built]
   [1] ./src/aaa.js 147 bytes {0} [built]
   [2] ./src/bbb.js 171 bytes {0} [built]

使用集成的npm run build命令映射webpack

在之前初始化npm中生成的package.json中有一个script属性:

//package.json
{
  "name": "init",
  "version": "1.0.0",
  "description": "no discription",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    
  },
  "author": "",
  "license": "ISC"
}

script中的内容就是npm自定义命令,在控制台输入npm run [命令名称]后,其中的命令名称会被替换成该属性的值.

 "scripts": {
    "build": "webpack"
  }

script中的命令会优先查找本地包指令(相对于全局安装的包)
相对的在终端执行命令会优先查找全局.