webpack

简介：

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

全局安装：

npm -g webpack webpack-cli

webpack -w 实时监听

初始化项目：

npm init -y

webpack文件配置--webpack.config.js（js打包）：

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

命令执行编译：

webpack --mode=development

webpack --progress --colors --watch

以通过参数让编译的输出内容带有进度和颜色，如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

配置npm命令运行，修改package.json:

"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }

css打包：

webpack本身只处理了javascript模块，如果要处理其他类型文件，需要使用loader进行转换

1.安装style-loader和css-loader：

2.配置对css打包合并的规则：