一、在对除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 } } }] } }
原文：https://www.cnblogs.com/LazyPet/p/12158531.html