什么是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.html 10 package.json 11 webpack.config.js
需要安装的插件等：
1，npm init --yes( 初始化项目的package.json )
2，npm install [email protected] -g ( 全局安装webapck )
3，npm install [email protected] --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 : true
13 })
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: true
14 })
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: true
14 })
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内嵌到浏览器
