[JavaScript知识库]2. webpack 的初体验

2. webpack 的初体验

2.1 初始化配置

1. 初始化 package.json

 npm init

2. 下载并安装 webpack

npm install webpack webpack-cli -g      // 全局安装
npm install webpack webpack-cli -D     // 本地安装  开发依赖 生成package-lock.json
//通过	webpack-cli 的指令使用 webpack 的功能

2.2 编译打包应用

1. 创建文件

入口文件：
src: index.js
输出文件目录build

index.js

// import './index.css';
import data from './data.json';
console.log(data);

function add(x, y) {
  return x + y;
}

console.log(add(1, 2));

index.css

html,
body {
  height: 100%;
  background-color: pink;
}

data.json

{
  "name": "jack",
  "age": 18
}

2. 运行指令

开发环境指令：webpack ./src/js/index.js -o ./build/js/built.js --mode=development 
功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成 浏览器能识别的语法。 
// 实际 webpack ./src/js/index.js -o ./build/js --mode=development  在 build/js 下生成默认main.js

生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production 
功能：在开发配置功能上多一个功能，压缩代码。

	使用执行打包后的资源：
	1.node方式
	>node ./build/js/main.js
	2.html方式：
	在build下创建html文件，使用script标签引入，用浏览器打开
	打印出 
	 { name: 'jack', age: 18 }   
	 3

3. 结论

webpack 能够编译打包 js 和 json 文件。 
能将 es6 的模块化语法转换成浏览器能识别的语法。
能压缩代码。

4. 问题

不能编译打包 css、img 等文件。