webpack入门

面试答题：

webpack构建流程：
webpack启动后，从entry开始，递归解析entry依赖的所有module，找到每个module.rules里配置的loader进行转换处理，对module转换后，解析模块，解析的结果是一个个的chunk，最后webpack会把所有chunk转换成。在整个构建过程中，webpack会执行plugin当中的插件,完成plugin的任务。
entry: 模块入口，使源文件加入到构建流程中，
output:配置如何输出
module：配置各种类型的模块的处理规则
plugin：配置扩展插件
devServer：实现本地服务，包括：http，模块热替换，source map等服务

一、安装

cnpm install webpack

二、webpack初始化

npm init -y
出现package.json文件

三、 webpack命令行

npm i -D webpack-cli

四、打包

npx(直接定位到node_modules/bin) webpack
npx webpack --mode development(开发模式打包)
npx webpack --mode production(生产模式打包)

五、示例

路径： src/clg.js

export default function clg(msg){
    console.log(msg);
}

路径：src/index.js

import clg from './clg.js'
clg('webpack init')

执行打包命令：

npx webpack --mode development

结果：在dist文件夹下出现main.js

路径：index.html，引入main.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpackdemo</title>
    <script src="./dist/main.js"></script>
</head>
<body>
    hello
</body>
</html>

结果：

六、package.json里命令行配置

七、webpack.config.js,npx webpack默认执行的就是webpack.config.js文件，如果是需要执行其他名称的文件，需注明

const path = require('path');
module.exports={
    //当前环境 开发环境:development ,生产环境 production
    "mode": 'development',
    //目标文件
    "entry":[path.resolve(__dirname,'./src/index.js')], //可以配置多个入口文件
    //输出文件
    "output":{
        path: path.resolve(__dirname,'./dist'),
        filename: 'app.js'
    },
    //插件
    "plugins":[],
    //模块规则
    "module":{

    }

}