webpack

// 第一个文件夹
//写入方法
module.exports = {}  //暴露..
// 第二个文件夹
require()//引入第一个文件夹的自定义模块

//方法模块
define([依赖的模块],function() {
  //暴露的接口
})
// 要引入的文件   main.js
require([引入上面的方法模块],function(参数是上面方法模块的方法名) {
})
//在HTML文件中,引入第三方文件require.js data-main属性提供了一个入口,写入第二个文件的地址]()

//安装(本地 webpack)
npm install webpack webpack-cli
function helloword() {
}
export default helloworld       //模块导出
import helloword form "./url"   //模块导入
//pwd  绝对路径
//最后在终端上 npx webpack    会出现一个main.js 文件

//通过配置文件自定义模块
//1. 创建 webpack.config.js 文件
//2. 引入 path 模块
const path = require('path')
//3. 
module.exports = {
    //配置入口
    entry: './src/index.js' ,
    output: {
    //指定输出文件的文件名
        filename : 'bundle.js' ,
    //指定文件的输出路径
        path: path.resolve(__dirname, './dist')
    } ,
    mode: 'none'
}
//4. html文件里  引入bundle.js文件
//5. 终端:
//       npx webpack       dist文件都是通过 config文件配置而成的

//1. 安装 
npm install html-webpack-plugin
//2. 自定义一个模块
//在  config 文件里添加如下代码 
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 plugins: [
        //第一个插件
        new HtmlWebpackPlugin({
            //模板
            Template: './index.html',
            //输出的文件的文件名
            filename: 'app.html',
            //标签的位置
            inject: 'body'
        })
    ]
//3. npx webpack
//4. dist 文件里会出现一个app.html

//清理 dist
//output 中添加
clean: true

//创建文件夹
//2. config 文件
mode: 'development'
//3. 使用 source-map 
//4. 终端 npx webpack --watch  实现自动编译
//5. 安装 webpack-dev-server 插件  实现自动更新无需是手动刷新 
devServer: {
    static: './dist'
}
6. npx webpack-dev-server  点Loopback后的网址

//在config文件中
module: {
        //规则
        rules: [
            {
                // 加载的文件类型
                test: /\.png$/, // $ 表示以png作为扩展名的文件
                //资源类型
                type: 'asset/resource',
                //自定义图片的名称与存放路径
                generator: {
                     //    文件夹  根据文件内容生成哈希字符串   扩展名 
                    filename: 'images/[contenthash][ext]'
                }
            }
        ]
    }

"scripts": {
    "start": "webpack serve -c ./config/webpack.config.dev.js",
    "build": "webpack -c ./config/webpack.config.prod.js"
  }

module.hot在config文件的devserver 中 设置的值为 true
if(module.hot) {
    //当 ./input.js 发生变化时,accept() 函数执行
    module.hot.accept('./input.js', () => {
    })

//手工关闭覆盖层
        client: {
            overlay: false,
        }
   //检查错误的配置
            {
                test: /\.js$/,
                use: ['babel-loader', 'exlint-loader'],
            }