webpack

---

前言

webpack是目前前端开发中最流行的打包工具，不仅能实现 JS 打包，还能将 CSS 文件，图片文件，甚至是 LESS 文件打包，每一个文件都是一个独立的模块，并且实现按需加载。使用时需要安装 webpack 、 webpack-cli 、webpack-dev-server三个基础模块。

---

一、安装

1.局部安装

1.cnpm i webpack -S // 局部安装webpack
2.cnpm i webpack-cli -S // 局部安装webpck脚手架

2.全局安装

1.cnpm i -g webpack
2.cnpm i webpack-cli

推荐使用局部安装

二、配置

1.npm init -y // 初始化一个webpack
2.执行上面的局部安装
3.新建一个webpack.config.js文件，在里面进行配置文件

配置文件 webpack.config.js

const path = require("path") // 引入path
const htmlWebpackPlugin = require("html-webpack-plugin") // 引入htmlWebpackPlugin，是用来打包HTML文件的 
module.exports = {
        entry: './src/index.js',  // 入口文件 要打包的文件
        output:{                  // 出口文件
            filename:'bundle.js', // 打包完成之后的文件名
            path:path.resolve(__dirname,'dist') // 打包在哪 -->打包在dist文件夹下
        },
        module:{
            rules:[
                {
                    test:/\.css$/,    // 配置解析css文件 
                    use:[             // 使用的插件 --> 从右到左的顺序
                        'style-loader',
                        'css-loader',
                    ]
                }
            ]
        }
       plugins: [                    // 配置打包HTML文件
        new htmlWebpackPlugin({ 
            filename: "index.html",  // 打包的文件路径
            template: path.join(__dirname, 'index.html') // 打包之后的文件名，打包在dist文件夹的根路径的下
        })
    ]
    }

插件

为什么要使用插件？

因为webpack默认只能打包js文件，当需要打包其它文件的时候，就必须下载插件，然后进行手动配置。

---

1.cnpm i css-loader style-loader -D --> 安装css的配置文件，这两个只能解析css文件，不能解析sass文件，如果有需要，另行下载 node-sass和sass-loader 插件

---

2.cnpm i html-webpack-plugin -D ---> 安装打包HTML文件的插件