一、
1.webpack通过loader可以支持各种语言和预处理器编写模块。webpack的各种loader描述了webpack如何处理非javascript模块，并且在bundle（包）中引入这些依赖。被用于转换某些类型的模块。
2.即webpack可以使用loader来预处理文件。允许打包除javascipt之外的任何静态资源。可以在import或“加载模块”时预处理文件。
3.loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后利用webpack的打包能力，对他们进行处理。
webpack官方loader
预处理器是在
真正的编译开始之前由编译器调用的独立程序。预处理器可以删除注释，包含其它文件以及执行宏替代等。
在应用程序中有三种使用loader的方式：
- 配置（推荐）：在
webpack.config.js文件中指定loader
嘿，webpack编译器，在你碰到 【在
require()/import语句中被解析为'.css'的路径】时，在你对它进行打包之前，先用style-loader和css-loader转换一下。
//1.命令行运行：先安装所需对应的loader
npm install -D css-loader ts-loader
//2.配置方式使用loader（常用）
//webpack的js配置文件：
moudle.exports = {
moudle:{
rules:[
{ test:/\.css$/, //必须属性，标识出应该被对应的loader进行转换的某个或某些文件
use:[ //必须属性，表示进行转换时，应该使用哪个loader
{ loader:'style-loader '},
{
loader:'css-loader',
options:{ //这是loader的额外配置项
modules:true
}
}
]},
{test:/\.ts$/, use:'ts-loader'}
]
}
}
- 内联：在每个
import语句中显示指定loader
//2.内联方式使用loader
import css from ' !style-loader!cdd-loader!./css/index.css'
- CLI：在shell(命令行)命令中指定它们。
//3.CLI方式使用loader：会对.jade文件使用jade-loader，会对.css文件使用style-loader和css-loader
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
loader常用于：压缩，打包，语言翻译等
二、
webpack插件列表
1.loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，包括打包优化、压缩和重新定义环境中的变量等。插件是webpack生态系统的重要组成部分，为社区用户提供了一种强大方式来直接触及webpack的编译过程。
2.使用：
-
require()插件 - 将插件添加到
plugins数组里。多数插件可以通过选项option自定义 - 使用
new操作符来创建它的一个实例
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
plugins : [
new HtmlWebpackPlugin(template :'./src/index.html')
]
}
三、
1.output.path 是所有打包后的文件输出的目标路径，必须是绝对路径。比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以output.path为基础的目录下。
2.out.publicPath并不会对生成文件的路径造成影响，主要是对你的页面引入的资源的路径做对应的补全。常见的就是css文件里面引入的图片。html里引入的资源路径会手动改变，没有影响。
module.exports = {
output : {
filename : 'js/[name].js', //[name]表示出口文件的名字和入口文件名字一样
path : path.resolve(__dirname , 'dist')
publicPath : './dist/'
}
}
__dirname表示当前文件所在目录的绝对路径
__filename表示当前文件的绝对路径
path.resolve()将从右到左对给定路径进行处理，生成绝对路径
四、
webpack-dev-server的相关配置
1.
webpack-dev-serve是webpack官方提供粉人一个小型Express服务器，可以为打包生成的资源文件提供web服务。主要有两个功能：
- 为静态文件提供服务
- 自动刷新和热替换（HMR）
2.常用配置项
module.exports = {
devServe : {
contentBase : '/dist',
compress : true, //是否启用服务器压缩
port: 7777,
host :'127.7.7.1',
proxy:{
'/api/v1/user' : { //匹配满足/api/v1/user这种格式的请求地址
target : 'http://gs.uestc1.com',
changeOrigin : true
},
'/api' : {
target : 'http://gs.uestc2.com',
changeOrigin : true
},
'/test' : {
target : 'http://gs.uestc3.com',
changeOrigin : true
},
}
}
}
示例：dev-serve如上配置
1.请求1的地址：/api/v1/user/staff
- 配置的有
host，所有请求会自动补充前缀。完整请求地址为：http://127.7.7.1:7777/api/v1/user/staff - 使用了
http-proxy进行代理重定向地址，代理从上到下依次匹配请求地址的格式，若满足则重定向到配置的新地址。 - 这里，请求1的地址能匹配到第一个
/api/v1/user，所以该请求地址将会从http://127.7.7.1:7777/api/v1/user/staff重定向到http://gs.uestc1.com/api/v1/user/staff这个地址去请求数据。 - 这个重定向是后台进行，所以浏览器的上显示的地址还是
host地址：http://127.7.7.1:7777/api/v1/user/staff
注意：如果大范围匹配的请求地址包含小范围匹配的地址，那么小范围的匹配必须写在大范围匹配的前面，不然小范围的匹配不会生效。
