一、核心概念

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

1 生成package.json的文件

  1. cnpm init -y 
  2. yarn init -y

2 新建.gitignore文件

2.png

3 安装webpack 和 webpack-cli

cnpm i webpack  webpack-cli -S
yarn add webpack  webpack-cli

4 新建webpack.config.js文件，新建src文件夹新建main.js文件

4-1 webpack.config.js

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'
    },
    mode:'development'//模式
}
module.exports = config

4-2 src/main.js

console.log("hello world");

5 配置package.json文件

{
   "scripts": {
        "build": "webpack  --config webpack.config.js"
      }
}

6 npm run build

npm run build

6-1自动在之前新建的出口dist文件夹生成bundle.js文件

7 新建public文件夹并新建index.html文件导入

<script src="../dist/bundle.js"></script>

8 npm run build

8-1此时会报错,则需要配置style-loader css-loader（在webpack.config.js的module）

错.png

二、loader

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

项目加载css

Tips:loader是配置在module中的

1 安装style-loader css-loader依赖

cnpm i style-loader css-loader -S

style-loader在前 css-loader在后

2 webpack.config.js

加上

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

变成

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.png

4 新建public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/bundle.js"></script>
</head>
<body>
    <div>dethbf</div>
</body>
</html>

5 src/main.js

import './assets/index.css';
console.log("hello world");

6 npm run build

三、plugin

1 在dist文件夹下自动生成index.html文件

cnpm i html-webpack-plugin -S

2 webpack.config.js文件

加上

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins:[
      new HtmlWebpackPlugin({
          title:"webpack-vue"
      }),
      <!-- new CleanWebpackPlugin()   -->//清除dist目录下需要的文件需要再安装依赖
    ],

2-1 安装clean-webpack-plugin依赖

cnpm i clean-webpack-plugin -S

2-1-1修改webpack.config.js文件中的filename

filename:'[hash]-[name]-bundle.js'

，dist文件夹中会新增js文件

2-2完整webpack.config.js文件

const {CleanWebpackPlugin} = require("clean-webpack-plugin")

plugins:[
      new HtmlWebpackPlugin({
          title:"webpack-vue",
                    template:path.join(__dirname,"public/index.html")
      }),
      new CleanWebpackPlugin()  
    ],

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

3 npm run build