WebPack笔记

概念

 

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。它所做的就是：分析项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言，（sass，TypeScript等），并将其大包为合适的格式供浏览器使用.

入口（entry）

入口起点指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始，进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的

每个依赖项随即被处理，最后输出到bundles的文件中

通过在webpack配置中配置entry属性，来指定一个入口起点（或多个入口起点）。默认值为./src

    entry:path.join(__dirname,'src/index.js'),

出口（output）

规定webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist。基本上，整个应用程序结构，都会被编译到指定的输出路径的文件夹中，如下：

 output:{

        filename:'bundle.js',
        path:path.join(__dirname,'dist')//path.join():分隔符把全部给定的 path 片段连接到一起，生成路径。
例如：path.join('foo', 'baz', 'bar'); // 返回 'foo/baz/bar'//Node.js 中，__dirname 总是指向被执行 js 文件的绝对路径，

所以当你在 /d1/d2/myscript.js 文件中写了 __dirname， 它的值就是 /d1/d2  ,

loader

loader让webpack能够去处理哪些非JavaScript文件，loader可以将所有类型的文件转化为webpack能够处理的有效模块，然后可以利用webpack的打包能力，对他们进行处理

本质上，webpack loader将所有类型的文件，转换为应用程序的依赖图（和最终的bundle）可以直接引用的模块

ps：loader能够import导入任何类型的模块，这是webpack特有的功能，其他打包程序或任务执行器的可能并不支持，我们认为这种语言拓展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图

在更高层面，webpack配置的loader有两个目标：

1.test属性，用于标识出应该对应的loader进行转换的某个或某些文件（类型）

2.use属性，表示进行转化时，应该使用哪个loader

例：

 module:{
        rules:[
            {
               test:/\.vue$/,
               loader:'vue-loader'
            }
]}

以上配置中，对一个单独的module对象定义了rules属性，里面包含两个必须属性：test和use，这段代码的意思是，到碰到.vue路径时，在对它打包之前，先使用vue-loader转换一下

ps：在webpack配置中定义loader时，要定义在module.rules中，而不是rules

插件（Plugins）

loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

想要使用一个插件，首先要require（）它，然后把它添加到plugins数组中。多数插件可以通过选项（option）自定义。也可以在一个配置文件中因为不同目的多次使用同一个插件，这时需要通过使用new操作符来创建它的一个实例

const HtmlWebpackPlugin=require('html-webpack-plugin')//通过npm安装
const webpack=require('webpack');//用于访问内置插件
const config={
module:{
rules:[
{test:/\.vue$/,use:'vue-loader'}
]
},
plugins:[
new HtmlWebpackPlugin({template:'./src/index.html'})
]
};
module.exports=config

模式

通过选择“development”或者“production”之中的一个来设置mode参数，可以启用相应模式下的webpack内置的优化：

module.exports={
mode:'production'
}