账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    前端 - 使用vue-cli脚手架生成的vue项目配置vue.config.js vue-loader不生效?
    361
    0

    使用vue-cli脚手架生成的vue项目。没有build文件夹,没法配置webpack.base.conf.js。
    通过vue.config.js配置webpack配置configureWebpack vue-loader不生效。希望通过vue-loader的preLoaders用自己写的loader处理html。已安装vue-loader15版本。

    webpack的配置项

    module.exports = {

    lintOnSave: false,
    publicPath: BASE_URL,
    configureWebpack: (config) => {
        const output = {
            // 把应用打包成 umd 库格式
            library: `${name}`,
            libraryTarget: 'umd',
            jsonpFunction: `webpackJsonp_${name}`,
        };
    
        
            // 为生产环境修改配置...
            // config.mode = 'development';
            let output2 = {
                ...output,
                devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]'
            }
            return {
                output: output2,
                module: {
                    rules: [{
                        test: /\.less$/,
                        use: [
                            'less-loader',
                            {
                                loader: require.resolve('px2rem-loader'),
                                options: {
                                    remUnit: 14, // 这里是因为给的设计图是按照768*1024pad的尺寸来的,因此设置啦这个单位,一般750手机设计图单位设置为75
                                },
                            },
                        ],
                    },
                    {
                        test: /\.vue$/,
                        loader: 'vue-loader',
                        options: {
                            // `loaders` 覆盖默认 loaders。
                            // 以下配置会导致所有无 `lang` 特性的 `<script>` 标签加载 `coffee-loader`
                            // loaders: {
                            //     js: 'coffee-loader',
                            //     css: ExtractTextPlugin.extract({
                            //         use: 'css-loader',
                            //         fallback: 'vue-style-loader' // <- 这是vue-loader的依赖,所以如果使用npm3,则不需要显式安装
                            //     })
                            // },
    
                            // `preLoaders` 会在默认 loaders 之前加载。
                            // 你可以用来预处理语言块——一个例子是用来处理构建时的 i18n
                            preLoaders: {
                                // js: '/path/to/custom/loader',
                                html: path.resolve('build/preLoader-makeId.js')
                            },
    
                            // `postLoaders` 会在默认 loaders 之后加载。
                            //
                            // - 对于 `html`, 默认 loader 返回会编译为 JavaScript 渲染函数
                            //
                            // - 对于 `css`, 由`vue-style-loader` 返回的结果通常不太有用。使用 PostCSS 插件将会是更好的选择。
                            // postLoaders: {
                            //     html: 'babel-loader'
                            // },
    
                            // `excludedPreLoaders` 应是正则表达式
                            // excludedPreLoaders: /(eslint-loader)/
                        }
                    }
                    ],
                },
                plugins: [
                    new VueLoaderPlugin()
                ]
            };
         return {
            output,
        };
    }
    
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版