1、环境配置

1-1 核心概念

Entry
| 代码的入口,打包的入口。
Output
| 打包文件的(bundle)所在的目录
Loader
|  可以处理非js文件
Plugins
|  可以参与打包的整个过程，打包优化压缩
mode  
|  development/production

1-2 起步

cnpm init -y //生产package.json的文件

cnpm i webpack  webpack-cli -S

// webpack.config.js
const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const {VueLoaderPlugin} = require("vue-loader")
const config =  {
    entry:path.resolve(__dirname,'src/main.js'),  //入口文件
    output:{  //出口文件
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{
      rules:[
          {
              test:/\.css$/i,
              use:['style-loader','css-loader']
          },
          {
              test:/\.vue$/,
              loader:'vue-loader'
          },{
              test:/\.(png|jpg|svg|gif|jpeg)$/i,
              type:'asset/resource'
          }
      ]  
    },
    plugins:[
      new HtmlWebpackPlugin({
          title:"webpack-vue",
          template:path.resolve(__dirname,"public/index.html")
      }),
      new CleanWebpackPlugin(),
      new VueLoaderPlugin()
    ],
    devtool: 'inline-source-map',
    devServer:{
        contentBase:"./dist",
        port:8000,
        host:"localhost",
        overlay:{
            errors:true
        }
    },
    mode:'development'  //模式
}
module.exports = config;

//配置package.json文件
{
  // 删除"main"入口配置添加"private"为true
   "private": true
   "scripts": {
        "build": "webpack  --config webpack.config.js"
      }
}

// 打包
npm run build

1-3 loader

wepack自身只能处理js和json文件,加上loader后,能让wepack去处理非js(css)的文件。loader可以将所有类型的文件转换为webpack能够处理的有效模块。

项目加载css

Tips:loader是配置在module中的

cnpm i style-loader css-loader -S

const webpack = require("webpack");
const path = require("path");
const config =  {
    entry:path.resolve(__dirname,'src/main.js'),  //入口文件
    output:{  //出口文件
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
+  module:{
+     rules:[
+          {
+              test:/\.css$/i,
+             use:['style-loader','css-loader']
+         }
+     ]  
+   },
    mode:'development'  //模式
}
module.exports = config;

1-4 plugins

1-4-1 给打包文件一个html文件

cnpm i html-webpack-plugin -S
//自动生成index.html文件

...
+const HtmlWebpackPlugin = require('html-webpack-plugin');
const config =  {
    ....
+    plugins:[
+      new HtmlWebpackPlugin({
+          title:"webpack-vue",
                   template:path.resolve(__dirname,"public/index.html")
+      })  
+    ],
    mode:'development'  //模式
}
module.exports = config;

1-4-2 清除dist文件夹

cnpm i clean-webpack-plugin -S
//清除dist目录下需要的文件

+ const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const config =  {
    ...
    plugins:[
      ...
+      new CleanWebpackPlugin()  
    ],
    mode:'development'  //模式
}