webpack基础使用

**Webpack 是一个前端资源加载/打包工具。
它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源**
简单来说就是将模块化代码打包为浏览器所识别的规范
将项目模块化文件打包生成普通脚本文件,引入到html中

*只能解释js文件*

新建一个文件夹，将其初始化为一个项目

npm init -y

使用之前需要安装：

cnpm i webpack webpack-cli —save-dev //开发阶段

建一个文件夹（装源码的文件夹）：

在根目录下创建webpack.config.js配置文件

配置文件的基础结构：

let path=require('path');
module.exports={
entry:"./src/main.js",
output:{
  filename:'bundle.js',
  path:path.resolve(__dirname,'dist'),
  clean:true
}

entry—入口，所以这里需要引入入口文件

output—出口：filename-导出的文件名，path-导出的文件路径，不能直接写绝对路径，底层会自动帮我们，所以前面要声明path；clean-每次打包前将之前打包的先清除掉

如果有多个入口文件，配置文件内容有一点点不一样

const path = require('path')
module.exports = {
  entry: {
    home: "./src/home.js",
    main: "./src/main.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle_[name].js",
    clean: true
  },
  optimization: {
    splitChunks: {
      chunks: "all",
    }
  }

}

修改package.json文件，添加打包命令

打包npm run serve

使用插件

插件一：

作用：自动生成打包后的html文件，自动引入打包好的脚本

一、在项目目录下安装

 

二、配置

 

插件二

作用：可视化图型插件，分析模块化大小

一、安装

 

二、配置

 

插件三

作用：将公共依赖抽离出来，单独放在公共文件进行管理，提升前端性能

如何用：不需要安装和下载，直接在webpack.config.js中引入就可以

 

loader：解释非js文件

安装：

 配置：