webpack

0配置使用步骤

1. 要有nodeJs
2. 下载 webpack和webpack-cli
3. 运行脚本webpack

• 注意 由于是0配置，所以项目中必须得有.src/index.js文件

package.json(包管理配置文件)

1. "devDependencies":{ 开发环境用的包，到了生产环境就用不到了 }
2. "dependencies":{开发和生产环境都能用到的包}
3. "scripts":{配置脚本命令}

"scripts": {
    "dev":"webpack"
},
运行 npm run dev 相当于 npx webpack

webpack.config.js(webpack配置文件)

const { resolve } = require('path'); //nodejs处理路径模块
const HtmlPlugin = require('html-webpack-plugin'); // 导入html-webpack-plugin插件
const htmlPlugin = new HtmlPlugin({ //创建Html插件实例对象
    template:'./src/index.html', //原文件的路径
    filename:'./index.html', //生成的文件存放的路径
})
module.exports = {
    // 代表webpack运行的模式，属性值有两个development/production
    mode: 'development',
    entry: './src/index.js', //打包入口文件的路径
    output: {
        path: resolve(__dirname, './dist/'), //输出文件的路径
        filename: 'bundle.js', //输出文件的名称
    },
    // webpack默认只能打包处理.js后缀名的模块，非.js则需要调用loader加载器才可以正常打包
    module:{//所有第三方文件模块的匹配规则
        rules:[//文件后缀名的匹配规则
                //test表示匹配的文件类型，use表示对应要调用的loader,exclude
            { test: /\.css$/, use: ['style-loader' , 'css=loader'] }
        ]
    }
    // 插件数组，将来webpack运行时会加载并调用这些插件
    plugins:[htmlPlugin],
    // webpack-dev-server插件配置
    devServer:{
        open:true,// 自动打开浏览器
        hot:true, // 热模块更替
        port:5000, // 指定端口
        contentBase:'./src', //指定打包根目录为src文件夹
    }
}

webpack-dev-server(自动打包插件)

1. 先安装 npm i -D webpack-dev-server
2. 再在webpack.config.js配置，然后运行脚本 webpack serve
3. 或者直接运行脚本 npx webpack-dev-server --hot --port 5000 --open --contentBase ./src

html-webpack-plugin(处理.html文件)

1. 先安装 html-webpack-plugin
2. 再在webpack.config.js配置

1. 先导入 
const HtmlPlugin = require('html-webpack-plugin');
2. 创建实例对象
const htmlPlugin = new HtmlPlugin({ //创建Html插件实例对象
    template:'./src/index.html', //原文件的路径
    filename:'./index.html', //生成的文件存放的路径
})
3. 把实例对象挂载到 plugins属性中，使插件生效
plugins:[htmlPlugin]

3. 运行脚本npx webpack

处理css文件（其他文件大同小异）

1. 安装style-loader和css-loader
2. 再在webpack.config.js配置

module:{//所有第三方文件模块的匹配规则
    rules:[//文件后缀名的匹配规则
            //test表示匹配的文件类型，use表示对应要调用的loader
        { test: /\.css$/, use: ['style-loader' , 'css=loader'] }
    ]
}

loader调用过程

1. webpack默认只能打包处理.js文件，如果用到其他文件
2. 则会查找webpack.config.js中的module.rules数组,看是否配置了对应的loader加载器
3. 然后会把非.js文件转交给对应的loader去处理
4. 处理好之后叫会给webpack，然后合并到出口文件.js中，最终生成打包好的文件