简明学习webpack

webpack配置项太多了，我的学习目标就是知道什么是webpack，它干嘛的，基础操作，下面开始。

 

了解webpack原理和概念

树结构：在一个入口文件中引入所有资源，形成所有依赖关系的树状图

模块：任意一个功能模块，例如es6模块，资源模块等等

chunk：打包过程中被操作的模块文件叫做chunk，例如异步加载一个模块就是一个chunk

bundle：bundle是最终打包后的文件，最终文件可以和chunk长得一模一样，但是大部分情况下它是多个chunk的集合

 

---

 

webpack.config.js的文件配置

const {resolve} = require('path');
module.exports = {
    /*
    * 1 entry 入口 指webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图
    * */
    entry:'./src/index.js',

    /*
    * 2 output 输出 指webpack打包后的资源bundle输出到哪里，以及如何命名
    * */
    output:{
        fileName:'build.js',
        path: resolve(__dirname,'build') //代表当前文件根目录下
    },

    /*
    * 3 loader webpack本身只能处理js模块，如果要处理其他类型的文件就需要使用loader进行转换。所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，
    * */
    module:{
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    /*
    * 4 plugins 插件 用于执行范围更广的任务，插件的范围包括 从打包优化和压缩一直到重新定义环境中的变量等
    * */
    plugins:[
        new webpack.BannerPlugin('菜鸟教程 webpack 实例')
    ],

    /*
    * 5 mode
    * 开发模式（development） 配置比较简单，能让代码本地运行即可
    * 生产模式（production） 线上模式，代码一定是最优化且无bug的
    * */
    mode:'development'
};

具体的还有多入口和多出口配置 打包css/html/less/sass资源等等，后续再补，关于webpack的安装和配置可以参考菜鸟教程的这篇

https://www.runoob.com/w3cnote/webpack-tutorial.html