标签：less babel loader webpack 打包 vue2 css

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

 

 

标签：less,babel,loader,webpack,打包,vue2,css
来源： https://www.cnblogs.com/leafchen/p/15530326.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。