一、介绍
1. 为什么要用？
js代码可以通过webpack直接进行打包，但是除了js代码，前端页面还会包含css,less，vue等其他文件格式需要处理；因此需要对webpack进行扩展，也就是loader；
2. 如何用？
通过npm安装必要的loader；在webpack.config.js中module下进行相关配置；将css，less，vue文件引入；
二、CSS文件
1. 写css文件
body{
background-color: blue
;
}
2. 在js中引入css文件
/*main.js: 1. 作为程序的入口，打包时候就是打包该文件*/
let info
= 'java工程师';
import {name,address
} from
'./js/first.js';
console.log
(info
);
console.log
(name
);
console.log
(address
)
// 依赖css文件
require
('./css/sz.css')
3. 安装对应的loader
npm install style-loader --save-dev
npm install css-loader --save-dev
安装完毕后，在package.json中可以看到下面的
"devDependencies": {
"css-loader": "^4.3.0",
"style-loader": "^1.2.1",
"webpack": "^3.6.0"
}
4. 在webpack.config.js中配置
const path = require(‘path’);
module
.exports
= {
entry
: './src/main.js',
output
:{
path
:path
.resolve(__dirname
,'dist'),
filename
: 'bundle.js',
},
module
: {
rules
: [
{
test
: /\.css$/,
use
: [ 'style-loader', 'css-loader' ]
}
]
}
}
三、LESS文件类似
四、图片文件类似
项目下面的src的img包；
五、ES6语法转ES5
最终打包的js文件，是ES6的，对于某些浏览器可能存在无法解析问题，因此将ES6转换为ES5；
