webpack4中文官网

依据process.env.NODE_ENV === 'production'区分开发模式还是生产模式，两模式对应不同的devtool选项

entry参数用来指定入口文件，从入口文件开始生成依赖树

module参数用来为指定文件使用指定的loader

    module: {
        rules: [
            {
                test,       // 指定文件类型
                exclude,    // 指定除外文件
                use,         // 指定loader
            }
        ]
    }

js文件如果使用babel-loader的话，需要指定presets和plugins（可选） css文件的话，网上的建议是同时使用style-loader和css-loader

使用开发服务器devServer需要先安装webpack-dev-server

    npm i --save-dev webpack-dev-server

在webpack设置中添加devServer启用开发服务器

    devServer: {
        contentBase,    // 指定服务路径
        index,          // 指定服务默认页面
        open,           // 指定开启服务时是否开启页面
        port,           // 指定服务启动是指定的端口号
        hot,            // 是否启用热加载
    },

启用热加载时需要在plugins中添加new webpack.HotModuleReplacementPlugin()（需要先require进来webpack变量）

可以在启动时动态指定mode参数来指定是为开发模式还是为生产模式，所以可以在命令中加入mode参数：

    "dev": "webpack-dev-server --mode=development",
    "build": "webpack --mode=production"

plugins参数用来指定构建时使用哪些插件 -> 插件列表

    plugins: [
        new CleanWebpackPlugin(['dist']),           // 此类为需要安装的插件
        ...,
        new webpack.HotModuleReplacementPlugin(),   // 此类为webpack内置插件
        ...,
    ],

使用CleanWebpackPlugin可以自动删除dist文件夹，生产模式下使用此插件不影响，删除之后还会生成 使用HtmlWebpackPlugin可以动态生成入口html文件，可以动态指定title、meta等（通过options设定），不用自己在目录添加index.html 使用NamedModulesPlugin可以在开启热加载时显示模块路径 HotModuleReplacementPlugin即开启热加载HMR

output用于指定输出路径

    output: {
        filename,
        chunkFilename,
        path,
    },

总觉得自己也不大能记住，在重新来一遍的话还是要费些时间找文档， 不过吧，用过一次就多一遍记忆，写一遍文档就有多一遍（即便过后不再看这个文档），下次多多少少也会省些时间的 至少基础知识我掌握了

以上

双向绑定 {= exp =} > 双向绑定仅支持普通变量和属性访问表达式，否则可能导致不可预测的问题。 -- San

插值 {{ exp }} 本身为表达式，可使用类似angular的管道操作符，San中称为过滤器

处理事件使用on-前缀，例如点击事件：on-click="reset"

dataTypes用于验证数据类型，据说只能在开发模式下使用

initData为初始化数据，为function

数据操作相关使用this.data

    this.data.set('key', value);
    this.data.get('key');
    this.data.merge('key', value);
    ...

demo

以上

this.data.push('key', item);
this.data.set(`arr[${index}].key`, value);
this.data.removeAt('arr', index);

可以在循环中声明一个索引，在on-click执行时将索引传进去（传值）。 也可以传$event，事件对象

demo

以上

课程持续时间比较短，很遗憾

系统事件或者自定义事件可以使用on-前缀绑定上一个事件

<input type="text" value="{= message =}"><button  on-click="handleClick">通知父组件</button>
<new on-message="handleMessage"></new>

自定义事件的事件名由子组件的fire函数的第一个参数决定

demo