什么是loader呢，官方解释为文件的预处理器，通俗点说webpack在处理静态资源的时候，需要加载各种loader,比如，html文件，要用html-loader, css文件要用css-loader,style-loader等等.
官方参考文档：https://webpack.js.org/loaders/
我们从本文开始，重新搭建一个项目结构来解释下loader的用法.
一、项目结构搭建准备：
目录结构：
1 demo3 2 ????dist 3 ????src 4 ????????components 5 ????????????modal.html 6 ????????????modal.js 7 ????????????modal.less 8 ????????main.js 9 ????index.html10 ????package.json11 ????webpack.config.js
需要安装的插件等：
1，npm init --yes( 初始化项目的package.json )
2，npm install webpack@3.5.6 -g ( 全局安装webapck )
3，npm install webpack@3.5.6 --save-dev (局部安装webpack )
4，npm install html-webpack-plugin --save-dev ( 安装html-webpack-plugin插件 )
相关的文件代码：
webpack.config.js代码
1 var htmlWebpackPlugin = require(‘html-webpack-plugin‘); 2 module.exports = { 3 ????entry : ‘./src/main.js‘, 4 ????output : { 5 ????????path : __dirname + ‘/dist‘, 6 ????????filename : ‘js/[name].bundle.js‘, 7 ????}, 8 ????plugins : [ 9 ????????new htmlWebpackPlugin({10 ????????????filename : ‘index.html‘,11 ????????????template : ‘index.html‘,12 ????????????inject : true13 ????????})14 ????]15 }main.js文件代码:
1 import modal from ‘./components/modal.js‘;2 let App = function(){3 ????console.log( ‘项目入口文件main.js‘ );4 }5 new App();modal.html文件代码:
1 <div class="modal">2 ????<div class="modal-heading">模态框头部</div>3 ????<div class="modal-body">模态框内容部分</div>4 </div>
modal.js文件代码:
2 let modal = function(){3 ????return {4 ????????‘component-name‘ : ‘modal‘5 ????}6 }7 export default modal;modal.less文件代码:
1 @c1 : #09f; 2 @c2 : #666; 3 .modal { 4 ????padding:20px; 5 ????div { 6 ????????margin: 10px; 7 ????} 8 } 9 .modal-heading {10 ????background:@c1;11 }12 .modal-body {13 ????background:@c2;14 }写完上面的结构和代码之后，我们开始执行webpack打包命令，然后安装babel-loader，把es6转成es5
官方参考文档：https://webpack.js.org/loaders/babel-loader/
安装: npm install --save-dev babel-loader babel-core babel-preset-env webpack
配置webpack.config.js文件
1 var htmlWebpackPlugin = require(‘html-webpack-plugin‘); 2 let path = require(‘path‘); 3 module.exports = { 4 ????entry: ‘./src/main.js‘, 5 ????output: { 6 ????????path: __dirname + ‘/dist‘, 7 ????????filename: ‘js/[name].bundle.js‘, 8 ????}, 9 ????plugins: [10 ????????new htmlWebpackPlugin({11 ????????????filename: ‘index.html‘,12 ????????????template: ‘index.html‘,13 ????????????inject: true14 ????????})15 ????],16 ????module: {17 ????????rules: [18 ????????????{19 ????????????????test: /\.js$/,20 ????????????????exclude: /(node_modules)/,21 ????????????????include: [22 ????????????????????path.resolve(__dirname, "src"),23 ????????????????],24 ????????????????use: {25 ????????????????????loader: ‘babel-loader‘,26 ????????????????????options: {27 ????????????????????????presets: [‘env‘]28 ????????????????????}29 ????????????????}30 ????????????}31 ????????]32 ????}33 }解释下新增加的配置：
rules就是配置规则，他是一个数组，每一项为一个对象，如果有多个loader,那就用多个对象， test: /\.js$/ 就是以.js结尾的文件， exclude:排除node_modules这个目录，意思就是不要去这个目录下处理.js的文件，有什么好处呢？大大提高打包的速度. include里面的配置意思就是把src目录下面的js文件作为处理的目标，use配置就是使用babel-loader
二、使用css
1，在src目录下新建一个css目录，在该目录下面新建一个css文件: style.css，代码如下：
1 html,body{ 2 ????margin: 0; 3 ????padding: 0; 4 } 5 body { 6 ????background: #08f; 7 } 8 ul,li { 9 ????list-style-type:none;10 }11 div {12 ????transition: all ease 1s;13 }然后在main.js中导入css文件
1 import modal from ‘./components/modal.js‘;2 import ‘./css/style.css‘;3 let App = function(){4 ????console.log( ‘项目入口文件main.js‘ );5 }6 new App();执行webpack打包命令，会报错，提示需要一个loader，我们安装css-loader和style-loader
安装命令: npm install css-loader style-loader --save-dev
官方参考文档：https://webpack.js.org/loaders/css-loader/
然后配置webpack.config.js:
1 var htmlWebpackPlugin = require(‘html-webpack-plugin‘); 2 let path = require(‘path‘); 3 module.exports = { 4 ????entry: ‘./src/main.js‘, 5 ????output: { 6 ????????path: __dirname + ‘/dist‘, 7 ????????filename: ‘js/[name].bundle.js‘, 8 ????}, 9 ????plugins: [10 ????????new htmlWebpackPlugin({11 ????????????filename: ‘index.html‘,12 ????????????template: ‘index.html‘,13 ????????????inject: true14 ????????})15 ????],16 ????module: {17 ????????rules: [18 ????????????{19 ????????????????test: /\.js$/,20 ????????????????exclude: /(node_modules)/,21 ????????????????include: [22 ????????????????????path.resolve(__dirname, "src"),23 ????????????????],24 ????????????????use: {25 ????????????????????loader: ‘babel-loader‘,26 ????????????????????options: {27 ????????????????????????presets: [‘env‘]28 ????????????????????}29 ????????????????}30 ????????????},31 ????????????{32 ????????????????test: /\.css$/,33 ????????????????exclude: /(node_modules)/,34 ????????????????use: [35 ????????????????????‘style-loader‘,36 ????????????????????‘css-loader‘37 ????????????????]38 ????????????}39 ????????]40 ????}41 }执行webpack打包， 你就能看到css被内嵌到文档中了, css-loader是处理css文件，style-loader是把css内嵌到浏览器
[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
原文地址：http://www.cnblogs.com/ghostwu/p/7504339.html