loader,即加载器。是webpack用来解析加载某些格式的文件,转化为浏览器能够识别的格式。比如转化less/sass为css,转化JSX语法为JS,转化ES6为ES5。
1.安装
解析es6语法我们用到babel加载器,在webpack安装如下,其他构建工具的安装查看babel官网
npm install babel-loader babel-core --save-dev
npm install babel-preset-es2015 --save-dev
2.配置
在webpack的配置文件中加入如下配置:
module: {
loaders: [
{
test: /\.js$/,
exclude: path.resolve(__dirname,'/node_modules/'),
include: path.resolve(__dirname,'/src/'),
loader: "babel-loader",
options: {
"presets": ["es2015"]
}
}
]
}
其中
test用正则表达式匹配文件后缀,
exclude表示不用该加载器解析的文件目录,
include表示需要用该加载器解析的文件目录(这两个设置可以加快打包速率),
loader表示用到的加载器,
options表示用到的加载器插件。
3.工程目录
一般我们写SPA(单页面应用)都是组件开发方式,在src源文件下可以新建一个打包入口文件(比如app.js),然后有一个组件文件夹(如:componet),该文件夹下每个组件对应一个文件夹,可以把所有打包的文件放到dist目录下。目录结构如下:
在webpack的配置可以如下:
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'js/[name].bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: path.resolve(__dirname,'/node_modules/'),
include: path.resolve(__dirname,'/src/'),
loader: "babel-loader",
options: {
"presets": ["es2015"]
}
}
]
},
plugins:[
new HtmlwebpackPlugin({
filename: "view/index.html",
template: "index.html",
inject: 'body',
title: 'use loader'
}),
]
}