vue2-3 webpack打包其它类型的文件

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