Webpack 概念理解

webpack

webpack是一个JavaScript应用程序的静态模块打包器（module bundler）。当webpack处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

webpack有四个核心概念：

• 入口（entry）
• 输出（output）
• loader
• 插件（plugins）
  
  

入口（entry）

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

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

可以通过在webpack配置（webpack.config.js）中配置entry属性，来指定一个入口起点（或多个入口起点）。

webpack.config.js：

const path=require('path'); //用于操作文件路径
module.exports={
    entry:path.join(__dirname,'/src/index.js'), //入口文件
    output:{
        path:path.join(__dirname,'/dist'), //打包后的文件存放的地方
        filename:'bundle.js' //打包后输出文件的文件名
    }
}

index.js

const hello=require('./hello.js'); //导入hello模块
document.querySelector('#root').appendChild(hello());

由上例可以看出，进入入口起点index.js后，webpack找到了入口起点所依赖的hello.js模块。每个依赖项都被处理，最终输出到名为bundles.js文件中。

出口（output）

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

可以通过在配置中指定一个output字段，来配置这些处理过程。如上例：

webpack.config.js：

const path=require('path'); //用于操作文件路径
module.exports={
    entry:path.join(__dirname,'/src/index.js'), //入口文件
    output:{
        path:path.join(__dirname,'/dist'), //打包后的文件存放的地方
        filename:'bundle.js' //打包后输出文件的文件名
    }
}

这个输出的bundle.js就会被引入到index.html中，页面就可以正常显示出来。后面可以使用HtmlWebpackPlugin插件来简化引入这个操作。HtmlWebpackPlugin插件可以自动生成index.html并且自动引用打包好后的js文件。

loader

loader让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后利用webpack的打包能力，对它们进行处理。

如何配置loader：

• test属性：用于标识该loader应该处理的文件。用正则表达式表示（文件后缀）。
• use属性：应该使用的loader类型

webpack.config.js：

module.exports={
	entry:path.join(__dirname,'/src/index.js'), //入口文件
    output:{
        path:path.join(__dirname,'/dist'), //打包后的文件存放的地方
        filename:'bundle.js' //打包后输出文件的文件名
    },
	module:{
        rules:[
            {
                test: /\.css$/, //正则匹配以.css结尾的文件
                use: ['style-loader','css-loader']
            },
            {
                test:/\.(scss|sass)$/, //正则匹配以.scss和.sass结尾的文件
                use:['style-loader','css-loader','sass-loader']
            },
            {
                test:/\.js$/,  //对es6的js代码进行转化
                exclude:/(node_modules|bower_components)/,//排除掉node_module目录
                loader:'babel-loader',
                options:{
                    presets:['env'] //转码规则
                }
            },
            {
                test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader:'url-loader',
                options:{
                    limit:1024,
                    name:'file/[path][name].[hash:7].[ext]'
                }
            }
        ]
    },
}

这么做的意义是告诉webpack编译器如下信息：

“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”

插件（plugins）

loader被用于转换某些类型的模块，而插件则可用于执行范围更广的任务。

插件的范围包括：从打包优化和压缩，一直到重新定义环境中的变量。

如何使用插件：

想要使用一个插件，首先要require()它，然后把它添加到plugins数组中。

const HtmlWebpackPlugin=require('html-webpack-plugin');
const webpack=require('webpack');

module.exports={
    ...省略
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'index.html',
            inject:true,
            minify:{
                removeComments:true,
                collapseWhitespace:true,
                removeAttributeQuotes:true
            }
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
}

参考：https://www.webpackjs.com/concepts/

​ https://segmentfault.com/a/1190000021693432