处理webpack项目中的资源文件

处理项目中的资源文件

1.ES6语法的转译

Webpack的API：
Webpack使用loader
http://webpack.github.io/docs/using-loaders.html
webpack的API中使用module-loader（包括include，exclude等）
http://webpack.github.io/docs/configuration.html#module-loaders

转译工具babel
Babel中在webpack中的使用
http://babeljs.cn/docs/setup/#webpack

node的path的用法
http://nodejs.cn/api/path.html#path_path_resolve_paths

安装：
Babel安装：npm install –save –dev babel-loader babel-core
因为我们用的是es2015 npm install bable-preset-es2015

文档结构：

Webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');// 因为要用绝对路径,所以我们使用node.js自带的pathvar path = require('path');module.exports = {     entry:'./src/app.js',    output:{        path:__dirname+'/dist',        filename:'js/[name]-bundle.js'    },    // 通过配置将加载器绑定到RegExp(正则表达式)    //ES6的转译插件babel    module:{        loaders:[            {                //检测所有的js文件                test: /\.js$/,                 //使用babel-loader                loader: "babel-loader",                //不用使用(使用绝对路径)的数组                //path.resolve可以得出绝对路径                    exclude:[                                       path.resolve(__dirname,'node_modules/'),                   path.resolve(__dirname,'dist/')                                  ],                // 只是src下的js使用(使用绝对路径)                include:path.resolve(__dirname,'src/'),         //因为es6是不断更新的,babel转译es6是有不同版本的,这里采用‘es2015’版,也可以在loader?presets='es2015'表示                query:{                    presets:['es2015']                }            }        ]    },    plugins:[        new htmlWebpackPlugin({            template:'index.html',            filename:'index.html',            title:'this is C',            inject:'body'        })    ]}

处理项目中的资源文件—案例1

2.处理项目中的css

安装css-loader和style-loader
npm install css-loader style-loader –save-dev

对css编译内容进行再次封装
npm install postcss-loader –save-dev
API：https://www.npmjs.com/package/postcss-loader
自动补充浏览器兼容前缀（postcss-loader的插件）
npm install autoprefixer –save-dev

目录结构：

common.js

app.js

webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');// 因为要用绝对路径,所以我们使用node.js自带的pathvar path = require('path');module.exports = {     //上下文环境(默认为当前路径，当然设置为绝对路径更好)    context:__dirname,    entry:'./src/app.js',    output:{        path:__dirname+'/dist',        filename:'js/[name]-bundle.js'    },    // 通过配置将加载器绑定到RegExp(正则表达式)    //ES6的转译插件babel    module:{        loaders:[            {                //检测所有的js文件                test: /\.js$/,                 //使用babel-loader                loader: "babel-loader",                //不用使用(使用绝对路径)的数组                //path.resolve可以得出绝对路径            exclude:[path.resolve(__dirname,'node_modules/'),                        path.resolve(__dirname,'dist/')],                // 只是src下的js使用(使用绝对路径)                include:path.resolve(__dirname,'src/'),                //因为es6是不断更新的,babel转译es6是有不同版本的,这里采用‘es2015’版,也可以在loader?presets='es2015'表示            query:{                    presets:['es2015']                }            },            {                //检测所有的css文件                test:/\.css$/,                    // css-loader是的在js中可以引用css文件，再用！将style-loader(是的css应用在HTML)串联起来                    //post-loader将编译的css进行封装                    //loader是从右向左读的，所以先进行postcss-loader再css-loader再style-loader                // loader:'style-loader!css-loader!postcss-loader'                //或者不写loader，写成loaders也是可以的                //从下往上读                loaders:[                    'style-loader',                    'css-loader',                    {                        loader:'postcss-loader',                        //对postcss-loader进行设置,引用它的autoprefixer插件,对浏览器最近5个版本进行兼容                        options: {                            ident: 'postcss',                            plugins: [                           require('autoprefixer')({                                          browsers:['last 5 versions']                                  })                            ]                        }                       }                ]            }        ]    },    plugins:[    new htmlWebpackPlugin({            template:'index.html',            filename:'index.html',            title:'this is C',            inject:'body'        })    ]}

结果：
生成的index.html：
虽然看不到引入的js，其实已经因为style-loader自动生成了

可以看到postcss-loader的autoprefixer插件使得flex-div兼容浏览器了

处理项目中的资源文件—案例2

3.处理css中@import进来的css文件

当我们的css文件中引入另外的css文件时

Common.js

flex.css

当我们还按照 案例2 中的方法去给flex加兼容性前缀时结果为：

可以看到flex的前没有加上
解决方法：
对webpack.config.js的loader中的css-loader进行参数配置
Webpack.config.js

loaders:[    'style-loader',    //利用css的参数解决@import css文件的问题    // importLoaders=1表示import进来的css使用一次css-loader(import进来2个文件就是2)    'css-loader?importLoaders=1',    {           loader:'postcss-loader',          //对postcss-loader进行设置,引用它的autoprefixer插件,对浏览器最近5个版本进行兼容         options: {               ident: 'postcss',              plugins: [               require('autoprefixer')({                        browsers:['last 5 versions']               })              ]         }      }]               

结果：

处理项目中的资源文件—案例3

4.使用less和sass

安装less
npm install –save-dev less-loader less
API：https://www.npmjs.com/package/less-loader

安装sass
npm install sass-loader node-sass –save-dev
API: https://www.npmjs.com/package/sass-loader

目录：

App.js引入less

layer.less中引入test-a.css和test-b.less
并且有一个需要自动设置浏览器兼容的

Webpack.config.js
在原来的基础上加上处理less的loader

{         test: /\.less$/,    //postcss-loader需要在style-loader，css-loader之前处理，less-loader，sass-loader之后处理    loaders:[           'style-loader',          //利用less@import less文件的时候不需要设置css-loader的参数          //@import css文件的时候需要设置css-loader的参数         'css-loader',         {        loader:'postcss-loader',        //对postcss-loader进行设置,引用它的autoprefixer插件,对浏览器最近5个版本进行兼容        options: {            ident: 'postcss',                     plugins: [                     require('autoprefixer')({                    browsers:['last 5 versions']                      })                       ]            }           },        // 引用less-loader        'less-loader'       ] }

结果：

可以看到一共有4个style标签，第1,2为引入的css，与less无关，第3个为less中引入css文件而没有设置css-loader参数，可以看到前缀没有生效，第4个为less文件和less中引入的less都在一个style中展示了。
处理项目中的资源文件—案例4
（sass和less是一样的，只不过 test:‘ /.scss$/,’使用的是sass-loader）

5.处理模板文件

API：http://webpack.github.io/docs/list-of-loaders.html#templating

html模板插件
npm install html-loader –save-dev

jade模板
npm install jade-loader –save-dev

ejs模板
npm install ejs-loader –save-dev

目录结构：

Layer.html

layerEjs.ejs

Layer.js

//引入html模板  其实是字符串import tpl from './layer.html';//引入ejs模板  其实是函数(用时可能会需要传入参数)import ejs from './layerEjs.ejs';function layer(){    return{        name:'layer',        tpl:tpl,        ejs:ejs    }}Export default layer

app.js

import './css/common.css';import layer from './components/layer/layer.js';import less from './components/layer/layer.less';const app = function(){    var dom = document.getElementById('app');    var newLayer = layer();    //模板其实就是newLayer.tpl属性，将模板当做字符串    dom.innerHTML =  newLayer.tpl;    var ejsdom = document.getElementById('ejsdiv');    //向ejs模板中传递参数    ejsdom.innerHTML = newLayer.ejs({        name:'hcd',        arr:['apple','xiaomi','honor']    })}new app();

webnpack.config.js
在原来的基础上加上

结果：

可以看到都在页面上显示出来了
处理项目中的资源文件—案例5

6.处理图片及其他资源

1.file-loader与url-loader

安装file-loader
npm install file-loader –save-dev
API：https://www.npmjs.com/package/file-loader

安装url-loaer
npm install url-loader –save-dev
https://www.npmjs.com/package/url-loader

不同之处：
Url-loader（内部含有file-loader）有一个参数limit参数，设置文件的大小（1000表示1K），当文件的大小< limit时，会将文件转化为base64的编码，当>limit时再交给file-loader处理

用base不会打包图片，但是会增加文件的体积

用file-loader会打包图片，不会增加图片的体积

用http请求图片可以起到一定的缓存作用，当有图片重复时，不会再次加载了
用base64呢，代码每次都会出现，增加代码的体积，影响HTML和js的大小

2.img-loader

安装 img-loader
（需要配合url-loader或者file-loader一起使用）
npm install img-loader –save-dev
https://www.npmjs.com/package/img-loader
(img-loader是可以根据不同的图片类型进行不同的设置，可以在官网上看)
压缩打包的图片
原来的图片是132k的，压缩后只有57.4k

3.引入图片

我们引入图片一般分为3种方式
1. 在css中引入（layer.less）

2.在入口的index.html文件中引入

3.在HTML模板文件中引入

Webpack.config.js
1.file-loader

1   //file-loader2      {3                   test:   /\.(png|gif|jpe?g|svg)$/i,4                   loader: 'file-loader',5                   // 设置编译后图片的地址和名称6                   // 放在outpath.path:__dirname+'/dist'下的assets文件夹下7                   // [文件名]-[5位的hash].[文件后缀]8                   options: {9                        name: 'assets/[name]-[hash:5].[ext]'10                  }  11        }

2.url-loader

1   //  url-loader2    {3                  test:   /\.(png|gif|jpe?g|svg)$/i,4                   loader: 'url-loader',5                   //设置参数6                   //limit表示img大于140k的用http请求，小于140k的用base647                   // 设置编译后图片的地址和名称8                   // 放在outpath.path:__dirname+'/dist'下的assets文件夹下9                   // [文件名]-[5位的hash].[文件后缀]10                  options: {11                            limit:1400000,12                       name: 'assets/[name]-[hash:5].[ext]'13                  }  14   }

3.img-loader

1   //img-loader(图片压缩需要和url-loader或者file-loader一起使用)2    {3         test:   /\.(png|gif|jpe?g|svg)$/i,4         loaders:[5                 'url-loader?limit=1400&name=assets/[name]-[hash:5].[ext]',6                  'img-loader'7          ]8   }               

处理项目中的资源文件—案例6