一、在对除js文件之外进行打包时(如css less之类)我们需要依靠loader,下列是package文件
{
"name": "sdasd",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3", //babel将es6转es5
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^2.0.2", //打包css
"file-loader": "^3.0.1", //打包大文件 图片
"less": "^3.9.0", //打包less
"less-loader": "^4.1.0",
"style-loader": "^0.23.1", //加载打包后css的样式
"url-loader": "^1.1.2", //图片链接
"webpack": "^3.6.0"
}
}
二、下面是webpake.config.js
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/dist/',
filename: 'boundle.js',
publicPath: 'dist/' //在dist文件中加载图片路径起作用
},
//这里是loader的配置 css
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader'] //使用多个loader是,加载从右向左
}, {
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader'
}]
}, {
test: /\.(png|jpg|gif|jpeg)/,
use: [{
loader: 'url-loader',
options: {
limit: '1300', //当图片大小小于limit时会将图片编译成base64字符串形式 单位是bit 依赖 url-loader
//当图片大于limit时依赖于file-loader and file-loader
name: 'img/[name].[hash:8].[ext]' //中括号内存放变量 为file-loader打包的文件命名
}
}]
}, { //这里是bable的配置 将es6转化为es5
test: '/\.js$/',
exclude: /(node_modules|bower_components)/, //exclude 排除文件
use: {
loader: 'babel-loader', //依赖加载项·
options: {
presets: ['es2015'] //presets 预先设置Es5
}
}
}]
}
}