webpack学习初体验

个人学习记录 代码有点乱将就吧.

参考笔记:http://www.woc12138.com/article/45

首先:创建项目要初始化

包的名字用小写,其他用默认值就行,生成一个package.json文件

npm init

一:实现打包js文件

下载依赖包webpack和webpack-cli ,-g是全局下载  -D是开发依赖,webpack都属于开发依赖

C:\project\webpackLearn>npm i webpack webpack-cli -g

C:\project\webpackLearn>npm i webpack webpack-cli -D

下面的命令是指定入口文件index.js,指定打包文件夹build中会生成打包文件main.js

--mode=development是开发模式 production是生产模式,区别是生产模式会压缩.

C:\project\webpackLearn>webpack ./src/index.js -o ./build --mode=development

在有需要的html中引用打包后的js文件即可.

二:实现打包css文件功能

2.1 webpack不能打包图片和css资源,在需要打包的js文件中引入css资源

import data from './data.json'

2.2 还需要设置配置文件webpack.config.js(与入口js文件同级

webpack.config.js指示webpack干活,里面是