loader 用于对模块的源代码进行转换。
（一）处理css文件
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
1.安装loader：npm install css-loader style-loader --save-dev
2.配置文件在webpack.config.ja中加入
module:{ rules:[{test:/\.css$/, loader:'style-loader!css-loader'}] }test:一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
loader：loader的名称（必须） 感叹号的作用在于使同一文件能够使用不同类型的loader
3.接下来我们创建一个css文件测试一下
我们写了一个div 并在外部写了一个css文件然后打包一下
4.
导入样式文件
webpack只有单一的入口，其它的模块需要通过 import, require, url等导入相关位置，为了让webpack能找到”style.css“文件，我们把它导入”index.js “中
然后webpack打包一下，webpack-dev-server --output-public-path dist实时刷新观看
这样就好了。
（二）处理图片
配置文件
module:{ rules:[ {test:/\.css$/, loader:'style-loader!css-loader'}, {test:/\.(gif|jpg|png|woff|svg|eot|ttf)$/, loader:'url-loader?limit=8192'}//最大路径长度 ] },安装
npm install --save-dev url-loader
npm install --save-dev file-loader两个都要安装
接下来我们引入一个图片测试一下
然后打包一下
出来了。
（三）plugins
webpack中另一个非常重要的功能是Plugins。 插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。 Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西：Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个;插件并不直接操作单个文件，它直接对整个构建过程其作用。 webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。
1.要使用某个插件，需要通过npm安装它，然后在webpack.config.js中的plugins关键字部分添加该插件的一个实例（plugins是一个数组，new一个插件即可）。
在webpack.config.js头部引入const HtmlWebpackPlugin= require('html-webpack-plugin');
然后在module下面写
plugins:[ new HtmlWebpackPlugin({ filename:"index1.html", template:__dirname+"/index.tmpl.html"//new 一个这插件的实例，并传入相关参数 // hash:true, // minify:{ // collapseWhitespace:true//折叠空白区域，压缩代码（最好不写） // } }), new HtmlWebpackPlugin({ filename:"index2.html", template:__dirname+"/index.tmpl.html"//new 一个这插件的实例，并传入相关参数 }) ]
html-webpack-plugin插件配置模板HTML文件 这个插件的作用是依据一个简单的模板，帮助生成最终的Html5文件，这个文件中自动引用了打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。 安装命令：npm install --save-dev html-webpack-plugin 这个插件自动完成了之前手动做的一些事情，在正式使用之前需要对项目结构做一些改变 1. 在app目录下，创建一个HTML文件模板index.tmpl.html，这个模板包含title等其它需要的元素，在编译过程中，本插件会依据此模板生成最终的HTML页面，会自动添加所依赖的 css, js，favicon等文件，
2.更新webpack的配置文件 plugins: [ new HtmlWebpackPlugin({ template: __dirname + “/index.tmpl.html” //模板路径 })] 3.打包 其他属性设置 hash:true, //向html引入的src链接后面增加一段hash值,消除缓存 minify:{ collapseWhitespace:true //折叠空白区域 也就是压缩代码 }
要是我们多个html模板文件,如何区分开生成多个页面呢？ 只要以链式的方法,再调用一次html-webpack-plugin插件,每次调用都要指定filename也就是生成页面的名字.调用一次生成一个页面,调用两次生成两个页面,以此类推. plugins:[ new HtmlWebpackPlugin({ filename:'index.html', //每次调用指定生成的html名称 template: './src/index.html' //模板地址 }), new HtmlWebpackPlugin({ filename:'index2.html', //每次调用指定生成的html名称 template: './src/index2.html' //模板地址 }) ]
生成的HTML文件引入各自的JS文件配置 我们需要在html-webpack-plugin中再配置一个参数,chunks,支持数组,数组里面填写的是引入的js,也就是entry里面配置的key,要引入哪个js就配置entry中的哪个key. plugins:[ new HtmlWebpackPlugin({ chunks:['index'], //添加引入的js,也就是entry中的key filename:'index.html', //每次调用指定生成的html名称 template: './src/index.html' //模板地址 })
然后配置完文件webpack打包一下。。
转载于:https://www.cnblogs.com/jxh-blog/p/9469359.html
