Hadoop 系统入门+核心精讲

Hadoop 系统入门+核心精讲

webpack5简单搭建vue项目
写在前面download

webpack在当今的前端范畴曾经是不可缺失的一局部了，不多说了，先理解一下webpack的四大中心

entry（入口）

entry是一切的起点，经过import通知webpack援用了哪些模块

// index.js
import module from './module'
import './index.css'
import './index.scss'
module()
console.log(2222)
复制代码

loader

假如将非js文件当作模块援用进来的时分，webpack是不具备转换非js文件的，这时能够经过loader把css,scss停止转换，loader是从下到上，从右到左编译的

// webpack.config.js
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']
      }
    ]
  }
}
复制代码

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项目

题外话download

没学webpack之前，就在想vue是怎样打包的，入口文件只要一个main.js,而且单文件里面的js,css是如何获取的，学了之后才发现原来有个vue-loader这个中心，vue文件的编译都是基于这个中心

初始化项目

// 初始化项目 创立一个package.json
npm init -y 
// 装置webpack
npm 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.js
const { 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配置download

// webpack.config.js
module.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代理download

在开发环境中能够经过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'] // 预设
          }
        }
      },
    ]
复制代码

完好代码download

// webpack.config.js
const 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')
    }
  },
 
}

download