Tips：每改变一次webpack.config.js的内容后，都需要重新启动一次serve

1. 起步

1. cnpm init -y   生成package.json文件
2. 生成.gitignore包，将不想上传的文件放在里面，如：node_modules
3. 安装依赖 cnpm i webpack -S

2. 构建

1. 构建一个webpack.config.js文件

const webpack = require("webpack");
const path = require("path");   //解决路径问题
//配置项
const config = {
    //__dirname  当前目录
    # // resolve不行就换成join
    evtry:path.resolve(__dirname,'/src/main.js'), //入口文件
    //evtry:path.join(__dirname,'/src/main.js')   join方法也可以
    output:{  // 出口文件
        path:path.resolve(__dirname,"/dist"),
        // filename  打包的文件名
        filename:"bundle.js"
    },
    mode:'development'
}
module.exports = config;

2-1. 配置package.json文件

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

2-2. 启动build

1. 安装依赖  cnpm i webpack-cli -S
2. 启动build  npm run build

3. Loader

可以打包非js文件
可以将所有类型的文件转化为webpack能够处理的模块文件

3-1. 处理CSS

安装模块：cnpm i style-loader css-loader -S

# webpack.config.js
const config = {
  ...
 moudle:{
        rules:[
            {
                test:/\.css$/i,
                use:['style-loader',css-loader]
            }
        ]
    },
  ...
}

 //启动build
  npm run build / yarn build

4. plugin

# // 可以参与打包的整个过程，打包优化压缩
安装依赖： cnpm i html-webpack-plugin -S  // 自动生成index.html文件

1. const HtmlWebpackPlugin = require("html-webpack-plugin");

2. # webpack.config.js
const config = {
  ...
  plugins:[
        new HtmlWebpackPlugin({
            title:"webpack-vue"
        })
    ],
  ...
}

打包的文件：dist/index.html

4-1. 清除无用打包文件

安装依赖 cnpm i clean-webpack-plugin -S

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

2. # webpack.config.js
const config = {
  ...
  plugins:[
       ...
       new CleanWebpackPlugin(),
    ],
  ...
}

5. 配置webpack-server

1. 安装依赖 cnpm i webpack-dev-server -S

2. # webpack.config.js
const config = {
  ...
  devServer:{
        contentBase:"/dist"
        port:"8000" //修改端口
        host:"localhost"  //修改主地址
    },
  ...
}

# package.json
   "scripts": {
    "serve":"webpack serve --open"
  },

// 启动serve  
      npm run serve / yarn serve

5-1. 追踪错误

devtool:"inline-source-map", // 追踪错误

6. 实现Vue

安装依赖  cnpm i vue vue-loader vue-template-compiler -S

6-1. 引入文本

# webpack.config.js

1. // 导入vue-loader
const {VueLoaderPlugin} = require("vue-loader");

2. // 导入模块
const config = {
  ...
   module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    },
  plugins:[
     new VueLoaderPlugin(),
  ]
  ...
}

1. # public index.html  //挂载点(模板文件)
<body>
    <div id="app">

    </div>
</body>

2. # App.vue
<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
    export default {
        data(){
            return {
                msg:"good"
            }
        }
    }
</script>

<style scoped>
</style>

3. # main.js  // 入口文件
import App from './App.vue';
import Vue from 'vue'
new Vue({
    render:h =>h(App)
}).$mount("#app");

6-2. 引入图片

# webpack.config.js
const config = {
  module:{
     rules:[
        {
           test:/\.(png|jpg|svg|gif|jpeg)$/i,
           type:"asset/resource"
            }
     ]
  }
}

# App.vue
<template>
    <div>
        {{msg}}
        <img src="./assets/123.jpg" alt="">
    </div>
</template>

7. 错误

重新安装依赖   cnpm i webpack -S

2021-01-27_170711.png

7-2. 报错显示在页面上

#  webpack.config.js
const config = {
  ...
plugins:[
   devServer:{
     ...
     overlay:{
       errors:true
    }
  }
]
...
}