### Elastic Stack从入门到实践
webpack5简单搭建vue项目写在前面webpack在当今的前端范畴曾经是不可缺失的一局部了，不多说了，先理解一下webpack的四大中心
entry（入口）entry是一切的起点，经过import通知webpack援用了哪些模块
// index.jsimport module from './module'import './index.css'import './index.scss'module()console.log(2222)复制代码loader假如将非js文件当作模块援用进来的时分，webpack是不具备转换非js文件的，这时能够经过loader把css,scss停止转换，loader是从下到上，从右到左编译的
// webpack.config.jsmodule.exports = {  mode:'development',  entry: './src/index.js',  output: {    path: __dirname + '/dist'  },  module:{    rules:[      {        test:/\.css$/,        use:['style-loader','css-loader']      },      {        test:/\.scss$/,        use:['style-loader','css-loader','sass-loader']      }    ]  }}复制代码plugin （插件）plugin主要是对loader的一个扩展，经过html-webpack-plugin打包后会创立html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')const webpack =require('webpack')module.exports = {  mode:'development',  entry: './src/index.js',  output: {    path: __dirname + '/dist'  },  module:{    rules:[      {        test:/\.css$/,        use:['style-loader','css-loader']      },      {        test:/\.scss$/,        use:['style-loader','css-loader','sass-loader']      },      {        test: /\.html$/i,        loader: "html-loader",      },      {        test: /\.md$/i,        use: ["html-loader",'markdown-loader'],      },    ]  },  plugins:[    new webpack.ProgressPlugin(), //打包进度报告    new HtmlWebpackPlugin()  ]}复制代码output (出口)望文生义就是打包后导出的文件在哪
好了 根本的理解就到这 如今我们能够从0搭建一个vue项目
从0搭建一个vue项目题外话没学webpack之前，就在想vue是怎样打包的，入口文件只要一个main.js,而且单文件里面的js,css是如何获取的，学了之后才发现原来有个vue-loader这个中心，vue文件的编译都是基于这个中心
初始化项目// 初始化项目 创立一个package.jsonnpm init -y // 装置webpacknpm i webpack webpack -D// 创立一个html模板mkdir public && cd public// 寄存开发文件mkdir src && cd src复制代码目录构造如下
├── public                     # 静态资源│   └── index.html             # html模板├── src     |—— main.js                # webpack入口文件复制代码新建webpack.config.js先配置一些根本的东西
// webpack.config.js// 加上这个vscode会有提示/** @type {import('webpack').Configuration} */const path = require('path');const webpack =require('webpack');function resolve(dir) {  return path.resolve(__dirname, dir)}module.exports = {  mode: 'development',  devtool: 'inline-source-map', // 提示哪行错误  entry: './src/main.js',  output: {    path: __dirname + '/dist',    filename: 'static/js/[name].[contenthash].js',    clean: true  // 打包肃清旧文件  },   plugins: [    new webpack.ProgressPlugin(), //打包进度报告    new HtmlWebpackPlugin({      template: './public/index.html'    })  ]}复制代码根本配置写好后，就能够开端在src里面写vue的代码了，这里需求npm i vue装置好需求的开发的工具，然后写好后我们来配置一下解析vue相关的内容，前面提到的重中之重，也就是中心vue-loader
vue-loader装置
npm i  vue-loader vue-template-compiler -D复制代码配置
// webpack.config.jsconst { VueLoaderPlugin } = require('vue-loader');module.exports ={// ...其他配置module: {    rules: [      {        test: /.vue$/,        loader: 'vue-loader'      }    ]  },  plugins: [     //...其他插件    // 请确保引入这个插件！    new VueLoaderPlugin()  ]}复制代码这个根本的配置就曾经打包胜利了，这里能够经过装置webpack-dev-server开启一个效劳器看看效果
webpack-dev-server创立一个运转脚本，运转npm run dev
"scripts": {    "build": "webpack",    "dev": "webpack serve --open"   },复制代码在webpack.config.js添加devServer配置
// webpack.config.jsmodule.exports ={// ...其他配置devServer: {    static: './dist',  // 开启的目的文件    hot: true,  // 开启热更新  }}复制代码就这一段代码是不是很简单,在这里一个根本的打包，构建曾经是能够的了，如今我们再来加点东西
加载css csss 文件首先装置css-loader sass-loader sass
npm i css-loader sass-loader sass -D复制代码vue-style-loader是vue-loader里面自带的loader,不需求额外引入
module: {    rules: [    // ...其他配置        {        test: /\.scss$/,        use: ['vue-style-loader', 'css-loader', 'sass-loader']      },      {        test: /\.css$/,        use: ['vue-style-loader', 'css-loader']      }    ]}复制代码加载图片webpack5里面内置理解析图片类型的，所以不需求我们额外装置其他loader
module: {    rules: [    // ...其他配置        {        test: /\.(png|jpg|gif)$/i,        type: 'asset/resource',       }    ]}复制代码加载字体module: {    rules: [    // ...其他配置        {        test: /\.(woff|woff2|eot|ttf|otf)$/i,        type: 'asset/resource'      },    ]}复制代码运用别名假如运用@/view/index这种文件途径的需求设置别名
resolve: {    alias: {      '@': resolve('src')    }  }复制代码extensions省略文件途径经过extensions能够不用写文件后缀
resolve: {    // ...其他配置    extensions: ['.js', '.json', '.vue', 'css']  }复制代码proxy代理在开发环境中能够经过proxy处置跨域
devServer: {    // ...其他配置    proxy: {      '/api': {        target: 'https://xxx.xxx',        changeOrigin: true // 这个必需要写        }    },  },复制代码优化美化打包进度条想要花里胡哨的进度条?? 这里有
npm i progress-bar-webpack-plugin -D复制代码const ProgressBarPlugin =require('progress-bar-webpack-plugin')plugins: [     //...其他插件     new ProgressBarPlugin()  ]复制代码打包输出指定文件夹经过type:'asset/resource'打包到指定文件夹里面，这个相当于file-loader，能够经过generator设置打包途径
module: {    rules: [    // ...其他配置        {        type:'asset/resource',        generator: {          filename: 'static/文件夹称号/[hash][ext][query]'        }      }    ]复制代码es6转es5装置babel-loader
npm i  babel-loader @babel/core @babel/preset-env -D复制代码module: {    rules: [    // ...其他配置        {        test: /\.js$/,        exclude:/node_modules/,  // 除去 node_modules        use: {          loader: 'babel-loader',          options: {            presets: ['@babel/preset-env'] // 预设          }        }      },    ]复制代码完好代码// webpack.config.jsconst path = require('path');const webpack = require('webpack');const { VueLoaderPlugin } = require('vue-loader');const HtmlWebpackPlugin = require('html-webpack-plugin');function resolve(dir) {  return path.resolve(__dirname, dir)}module.exports = {  mode: 'development',  entry: './src/main.js',  output: {    path: __dirname + '/dist',    filename: 'static/js/[name].[contenthash].js',    clean: true,  },  module: {    rules: [      {        test: /\.vue$/,        loader: 'vue-loader'      },      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: 'babel-loader',          options: {            presets: ['@babel/preset-env']          }        }      },      {        test: /\.scss$/i,        use: ['vue-style-loader', 'css-loader','sass-loader']      },      {        test: /\.css$/i,        use: ['vue-style-loader', 'css-loader'],      },      {        test: /\.(png|jpg|gif)$/i,        type: 'asset/resource',        generator: {          filename: 'static/img/[hash][ext][query]'        },      },      {        test: /\.(woff|woff2|eot|ttf|otf)$/i,        type: 'asset/resource',        generator: {          filename: 'static/fonts/[hash][ext][query]'        },      },    ],  },  plugins: [    // 请确保引入这个插件！    new VueLoaderPlugin(),    // new ProgressBarPlugin(), // 花里胡哨的进度条    new webpack.ProgressPlugin(), //打包进度报告    new HtmlWebpackPlugin({      template: './public/index.html'    })  ],  devServer: {    static: './dist',    hot: true,    proxy: {      '/api': {        target: 'http://xxx.xxx',        changeOrigin: true      }    },  },  resolve: {    extensions: ['.js', '.json', '.vue', 'css'],    alias: {      '@': resolve('src')    }  }, }
链接：https://pan.baidu.com/s/1etjyb7IUhMKHhBK008p4DA
提取码：b2so
--来自百度网盘超级会员V4的分享