0
点赞
收藏
分享

微信扫一扫

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 等文件。
举报

相关推荐

0 条评论