其他分享
首页 > 其他分享> > 9102年：手写一个Vue的脚手架

9102年：手写一个Vue的脚手架

作者：互联网

性能优化没有尽头，本人仅表达自己目前掌握的知识点，士别三日，刮目相看：每隔三天，技术就会进步一次

webpack常见配置

// 入口文件
  entry: {
    app: './src/js/index.js',
  },
  // 输出文件
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'     //确保文件资源能够在 http://localhost:3000 下正确访问
  },
  // 开发者工具 source-map
  devtool: 'inline-source-map',
  // 创建开发者服务器
  devServer: {
    contentBase: './dist',
    hot: true                // 热更新
  },
  plugins: [
    // 删除dist目录
    new CleanWebpackPlugin(['dist']),
    // 重新穿件html文件
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    // 以便更容易查看要修补(patch)的依赖
    new webpack.NamedModulesPlugin(),
    // 热更新模块
    new webpack.HotModuleReplacementPlugin()
  ],
  // 环境
  mode: "development",
  // loader配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }

　　

这里面我们重点关注 module和plugins属性，因为今天的重点是编写loader和plugin，需要配置这两个属性。

插件实例在获取到 compiler 对象后，就可以通过 compiler.plugin(事件名称, 回调函数) 监听到 Webpack 广播出来的事件。
并且可以通过 compiler 对象去操作 webpack。

1.2 打包原理

脚手架一般都是遵循了commonjs模块化方案，如果你不是很懂，那么看起来很费劲，我写的脚手架，就不使用模块化方案了，简单粗暴

配置入口

entry: path.resolve(__dirname, '../src/main.js')}

　　

配置输出目录

output: {
        filename: 'js/[name].[hash:5].js',
        path: path.resolve(__dirname, '../dist'),
       
    },

　　

引入Vue脚手架里基本配置的loader ，后面的loader都是往rules数组里加就行了~

module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: 'img/[name]-[hash:5].[ext]',
                        }
                    }
                ]
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name]-[hash:5].[ext]',
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 4096,
                            name: 'media/[name]-[hash:5].[ext]',
                        }
                    }
                ]
            }
        ]
    },

　　

有人会问 这么多我怎么看啊 别急 第一个url-loader是处理base64图片的，让低于limit大小的文件以base64形式使用，后面两个一样的套路，只是换了文件类型而已 ，不会的话，先复制过去跑一把？

配置识别.vue文件和tempalte模板 , yarn add vue vue-loader vue-template-compiler

加入loader

{
test:/\.vue$/,
loader:"vue-loader"
}

加入plugin 
const vueplugin = require('vue-loader/lib/plugin')


在webpack的plugin中

new  vueplugin()即可

　　

入口指定babel-polifill ,vendor代码分割公共模块，打包后这些代码都会在一个公共模块

 app: ['babel-polyfill', './src/index.js', './src/pages/home/index.js', './src/pages/home/categorys/index.jsx'],
 vendor: ['vuex', 'better-scroll', 'mint-ui', 'element-ui']

　　

指定 html文件为模板打包输出，自动引入打包后的js文件

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

plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname,'../index.html'),
            filename: 'index.html'
        }),
    ]

　　

省掉.vue的后缀 ,直接配置在module.exports对象中,跟entry同级

  resolve: {
        extensions: ['.js','.json','.vue'],
        
    }

　　

加入识别html文件的loader

    {
    test: /\.(html)$/,
    loader: 'html-loader'
    }

　　

开启多线程编译

const os = require('os')
    {
            loader: 'thread-loader',
            options: {
                workers: os.cpus().length   
                     }
    }

　　

加入babel-loader 加入 babel-loader 还有 解析JSX ES6语法的 babel preset

 
  @babel/preset-env解析es6语法 
  @babel/plugin-syntax-dynamic-import解析vue的 import按需加载，附带code spliting功能
   

{
        test: /\.(js|jsx)$/,
        use:
        {
            loader: 'babel-loader',
            options: {
                presets:   ["@babel/preset-env", { "modules": false }] ,//附带`tree shaking`
                plugins: ["@babel/plugin-syntax-dynamic-import"]
                     },
                cacheDirectory: true//开启babel编译缓存
        }
   },

　　

在使用上面的babel配置后 我们躺着就可以用vueRouter的路由懒加载了

路由懒加载

标签：Vue,babel,9102,loader,webpack,vue,脚手架,js,true
来源： https://www.cnblogs.com/91yangxing/p/10881569.html