目录
webpack里面有很多loader,这里记录几个比较常用的。
1 css-loader
1.1 新建文件
使用cssloader需要先创建一个css文件,这里在css目录下新建一个normal.css文件,整个项目所有的代码都放在了src目录下。
1.2 在入口文件里添加引用
在main.js文件里添加对css文件的引用。
1.3 安装和配置css-loader
执行下面两个命令:
npm install --save-dev css-loader
npm install style-loader --save-dev
上面两个命令都要执行。然后在webpack.config.js文件里添加下面的配置:
module: {
rules: [
{
test: /\.css$/,
// css-loader只负责将css文件进行加载,如果还有使用还需要style-loader
// style-loader负责讲样式添加到dom中
// 使用多个loader时,顺序是从右向左读的
use: [ 'style-loader','css-loader' ]
}
]
}
然后执行npm run dev 进行编译,就可以了,然后在浏览器中打开要访问的页面,就可以了。
2 less-loader
有的时候,我们会创建less文件,来设置样式,
2.1 创建文件
接着在css目录下创建special.less文件,内容如下:
@fontSize:50px;
@fontColor:orange;
body{
font-size: @fontSize;
color: @fontColor;
}
2.2 在入口文件里添加引用
// 3 依赖css文件
require('./css/normal.css');
// 4 依赖less文件
require('./css/special.less');
2.3安装和配置less-loader
npm install --save-dev less-loader less
然后在webpack.config.js文件里添加下面的配置:
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
然后执行npm run dev,在浏览器里访问页面可以看到了。
### 3 url-loader
如果我们想在css文件里引用图片,就需要使用url-loader。首先我们需要准备一张图图片,这里我放在了src目录下的img文件夹下。然后修改normal.css文件,设置页面的背景图片。
body {
background: url("../img/huluwa.png");
}
3.1 配置和安装url-loader
执行下面这个命令安装url-loader。
npm install --save-dev url-loader
然后在webpack.config.js文件里添加:
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
limit是限制使用的图片的文件的大小,如果不超过这个就会将图片直接转成base64的字符串。然后执行npm run dev 就可以了。
3.2 安装和配置file-loader
当图片文件的大小超过了上面设置的值,再执行编译命令,就会提示报错,这个时候需要安装file-loader。这个时候再执行编译命令,就发现没有报错了,但是打开浏览器发现图片还是显示不了,F12打开看以后,发现它引用的是一个文件,而不再是一个base64的字符串,
也就是说它找文件是在index.html文件的所在的目录去寻找的图片文件,但是实际上这个文件是在项目的dist目录下,
这个文件就是我们引用的文件,它的名字是webpack用哈希算法生成的,是为了防止文件重名。
这个时候找不到文件,需要在webpack.confgi.js文件里添加下面这个属性,设置公共路径:
publicPath: "dist/"
这样,涉及到的所有url都会在前面加上dist,如下图,这样显示就没有问题了。
3.3 设置文件名
但是这样也有一个问题,就是它显示的url文件名,我们并不知道它是啥,可以通过下面的配置来设置文件名。
name:'img/[name].[hash:8].[ext]'
这行代码的意思就是将文件打包到dist目录下img文件夹,并用原来的文件名加上8为hash值,使用原来的扩展名。
3 ES6语法处理
webpack打包的js文件里,并没有将es6的语法转成ES5的语法(比如说我们可以在打包的文件里搜到const 关键字),这个时候就要使用另外一个插件:babel-loader
执行下面这个命令,这个和官网上的不太一样,这个不用再加其他的配置文件。
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
然后在webpack.config.js文件里加下面的配置:
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
然后再执行编译命令,就可以看到webpack打包的js文件里已经没有es6语法了。