webpack中文文档
1. 其它文件类型如:.css, .less,图片的打包:
需要对应的loader的支持
安装loader: --save--dev: 开发时依赖, 只在开发时使用的包; --save:发布时依赖,发布运行时依赖的包
npm install --save-dev 对应的loader名
2. ES6, typeScript语法等打包时,转为ES5
以ES6为例: const , let 定义的变量; {data, name, height}, fun1(){} 字面量的定义等都与ES5有不同
# 安装对应版本的babel-loader(loader), babel-core(核心), babel-preset-es2015(ES6) # 其它语法如typeScript语法等,有对应babel-preset-es2015的库 npm install --save-dev babel-loader babel-core babel-preset-es2015
其它类型文件:
1. css文件的打包
1. 在要打包的文件中引用该css,才能被当作依赖一起打包
require('./css/test1.css')
2. 需要安装:style-loader, css-loader 两个依赖库
3. 在webpack.config.js 中添加对应配置
2. less文件的打包
1. 使用该文件:
require('./less/test1.less')
2. 需要安装: style-loader, css-loader , less-loader
3. 配置webpack.config.js
3. 图片的打包
1. 使用该图片, 如
css中作为背景图使用:{ background(url: "...") }, 再将css引入要打包的文件
require('./css/test1.css')
2. 需要安装: url-loader, file-loader
3. 配置webpack.config.js