webpack打包依赖loader
1.打包css依赖
npm install --save-dev css-loader
配置webpack.config.js文件
{
test:/\.css$/,
use:['style-loader','css-loader']
}
2.打包less依赖
npm install less less-loader --save-dev
npm install less less-loader --save-dev
{
test: /\.less$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "less-loader",
},
],
}
3.打包img
npm install url-loader --save-dev
npm install file-loader --save-dev
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
//如果小于limit的限制则打包的时候会把图片转成base64,如果大于limit则会直接打包图片文件进行引用(file-loader)
limit: 1000,
name: 'img/[name].[hash:8].[ext]',
},
},
],
},
4.ES6转换成ES5
npm install babel-loader@7 babel-core babel-preset-es2015 --save-dev
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}