webpack

一、什么是webpack

webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

2.在webpack应用中有两个核心作用: 

• 模块转换器，用于把模块原内容按照需求转换成新内容，可以加载非 JS 模块；
• 扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。

 二、如何使用

1.创建一个目录并在终端中进入当前目录执行

npm init -y

2.安装webpack和webpack-cli

npm install webpack webpack-cli --save-dev

3.打开webpack.config.js文件，定义入口和输出 红框的是手动添加

4.在package.json里面 一个npm脚本，这样运行本地的webpack比较方便

5.执行

npm run build

就可以在dist文件夹下生成打包后的bundle.js文件

三、如果想要处理js以外的文件

就要安装其他的插件

比如说

处理样式文件

npm install css-loader style-loader --save-dev

在webpack.config.js配置文件中配置loader

moudle:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }