Webpack5 vue项目

CV大成者
95 阅读3分钟

Webpack

webpack是一个模块打包工具，把所有浏览器不能直接识别的文件打包成能识别的文件(例：html,css,js)

官网：webpack.docschina.org/

配置文件基础结构

{
  mode:打包模式(开发环境/生产环境)
  entry:构建开始的地方
  output:打包输出文件的地方
  module:不同模块或不同类型文件的打包方式规则
  plugins:插件/文件打包后的其他附加功能(提取css)
  resolve:解析/配置模块如何解析(例：增加@的别名)
  devServer:服务器
  externals:避免将某些import的包打入，是需要用时再从外部获取(例：从cdn获取)
}

常用loader和插件

loader:负责打包转换某种格式文件(例：less-loader 转换less)

### 编译css
css-loader:解析css导入
style-loader:css注入DOM
postcss-loader:PostCss处理css
node-sass:将Node.js绑定到LibSass，它允许用户以令人难以置信的速度将.scss文件本地编译为css，并通过连接中间件自动编译(sass-loader需要使用)
sass-loader:编译sass
less-loader:编译less
vue-style-loader:Vue作者在style-loader上扩展的(支持SSR等其他功能)

### 编译js
>因各版本浏览器语法不兼容和新增的ES6,ES7,ES8,ES9,ES10等支持程度不一样,babel可以把这些语法转换成es5浏览器识别的语言。因包太大，就拆分出@babel/core,@babel/preset-env等小包。

@babel/core
@babel/preset-env
babel-loader:编译JS语法的


### 编译vue文件
vue-loader:官方提供的

基础示例


const { VueLoaderPlugin } = require('vue-loader');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const { resolve } = require('./utils.js');
const PORT = 8080;

module.exports = {
  //项目打包入口文件
  entry: resolve('../src/main.js'),
  output: {
    //项目打包文件输出地址
    path: resolve('../dist'),
    //文件名字格式
    filename: 'js/[name].js',
  },
  module: {
    rules: [
      //处理vue文件
      {
        test: /\.vue$/,
        use: ['vue-loader'],
      },
      //处理js文件
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      //处理图片
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'img/[name].[hash:7].[ext]',
        },
      },
      //处理音视频文件
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'media/[name].[hash:7].[ext]',
        },
      },
      //处理字体文件
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash:7].[ext]',
        },
      },
      //处理css文件
      {
        test: /\.css$/,
        use: ['css-loader'],
      },
      //处理less文件
      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
      },
      //处理scss文件
      {
        test: /\.scss$/,
        use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
      },
    ],
  },
  plugins: [
    //打包文件(js,css等)并自动插入到模版index.html中
    new HtmlWebpackPlugin({
      template: resolve('../public/index.html'), //模版文件
      filename: 'index.html', //模版文件输出地址
      title: '手搭vue-webpack',
    }),
    //编译vue文件
    new VueLoaderPlugin(),
    //复制static文件夹的文件
    new CopyWebpackPlugin({
      patterns: [{ from: resolve('../static'), to: resolve('../dist/static') }],
    }),
  ],
  //开发环境需要webpack服务器
  devServer: {
    port: PORT, // 端口
    hot: true, //热加载
    open: true, //自动打开浏览器
    historyApiFallback: true, //404 重定向
    client: {
      overlay: true, //报错显示页面全屏
    },
    static: {
      directory: resolve(__dirname, '../dist'),
      publicPath: '/',
    },
  },
  resolve: {
    //import路径自动识别.js,.vue文件课省略不写
    extensions: ['.js', '.vue'],
    //可使用@/views/路径
    alias: {
      '@': resolve('../src'),
    },
  },
};

优化表例

开发环境：
1.有服务器
2.服务器端口占用

生产环境：
1.无服务器
2.有css提取
3.有contenthash等值

区分出
base.js  基础配置
dev.js   开发环境单独配置
prod.js  生产环境单独配置
通过webpack-merge合成 base.js+dev.js（开发完整配置），base.js+prod.js(生产完整配置)

项目参考地址：分支(前端)
https://gitee.com/training-course---framework/webpack

本人很懒
avatar
文章
阅读
粉丝