zoukankan      html  css  js  c++  java
  • 给webpack增加单元测试功能

    1、参考文章:https://juejin.im/post/5d2542606fb9a07ecb0bcfe7

    2、修改依赖文件的版本号:

        "jsdom": "^13.0.0",
        "jsdom-global": "^3.0.2",
    

    3、撰写webpack.test.js 文件:

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    const {CleanWebpackPlugin} = require('clean-webpack-plugin'); 
    
    
    module.exports = {
        devtool: 'inline-cheap-module-source-map',
        entry:{
            index:path.resolve(__dirname,'../src/app.js')
        },
        output:{
            filename:'js/[name].[hash].js',
            path:path.resolve(__dirname,'../dist'),
        },
        resolve:{
            extensions:['.js','.vue','.json'],
            alias:{
                "@":path.resolve('src')
            }
        },
        stats: { 
            warningsFilter: (warning) => /Conflicting order between/gm.test(warning),
            children: false 
        },
        module:{
            rules:[
                {
                    test:/.vue$/,
                    use:'vue-loader?cacheDirectory=true',
                    include:path.resolve(__dirname,'../src'),
                    exclude:/node_modules/
                },
                {
                    test:/.(png|gif|jpeg|jpg)$/,
                    use:[
                        {
                            loader:'url-loader?cacheDirectory=true',
                            options:{
                                name:'img/[name].[ext]',
                                limit:1024
                            }
                        }
                    ],
                    include:path.resolve(__dirname,'../src'),
                    exclude:/node_modules/
                },
                {
                    test: /.(js|ts)/,
                    use: [
                        {
                            loader: 'istanbul-instrumenter-loader',
                            options: { esModules: true }
                        },
                        'babel-loader?cacheDirectory=true'
                    ]
                },
            ]
        },
        plugins:[
            new CleanWebpackPlugin(),
            new VueLoaderPlugin(),
            new HtmlWebpackPlugin({
                template:path.resolve(__dirname,'../src/index.html')
            })
        ],
        externals: [require('webpack-node-externals')()]
    }

    注意,这里是没有将vue等基础库,打包成dll文件的。

  • 相关阅读:
    webpack 3.X学习之CSS处理
    webpack 3.X学习之图片处理
    webpack 3.X学习之基本配置
    webpack 3.X学习之JS压缩与打包HTML文件
    webpack 3.X学习之初始构建
    【复习】VueJS之内部指令
    前端学习记录之Javascript-DOM
    javascript常用的Math对象的方法
    nodejs+mongoose+websocket搭建xxx聊天室
    Markdown常用语法
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/12431875.html
Copyright © 2011-2022 走看看