webpack 共用文件抽离?

发布于 2022-09-04 12:12:26 字数 6020 浏览 10 评论 0

resource.js

"use strict";
//base
import Vue from 'vue';
import VueResource from 'vue-resource';
import store from '../store/index.js';
//use
Vue.use(VueResource);

const supportWebp = (function () {
    try {
        return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
    } catch (err) {
        return false;
    }
})();

function setUrl(url) {
    let _prefix = location.origin + '/uci-pre/unionpay/';
    if (/^https?/.test(url)) {
        //绝对地址
        return url;
    } else {
        //非生产的请求地址
        if (!/content.95516.com/.test(location.host)) {
            _prefix = 'http://122.32.33.61:8080/uci-pre/unionpay/';
        }
        return _prefix + url + '.json';
    }
}
function setLocation() {
    var _location=store.state.location;
    return {
        latitude: _location.latitude,//维度
        longitude: _location.longitude,//经度
        ..._location.cup
    }
}
export default {
    ajax(params){
        console.log(params);
        if (params.type == 'get') {

        } else {

        }
    },
    post(params){
        console.log(setLocation());
        const _url = setUrl(params.url);
        const _data = JSON.stringify({webp: supportWebp, ...params.data});
        console.log(_data);
        Vue.http.post(_url, _data).then((response)=> {
            console.log(response);
            if(10000==response.body.code){
                params.callback && params.callback(response, 100, 'ok');
            }else{
                params.callback && params.callback(response, 0, JSON.stringify(response));
            }

        }, (err)=> {
            console.log(err);
            params.callback && params.callback(err, 0, JSON.stringify(err));
        })
    },
    get(params){
        console.log(params);
    }
}

webpack.base.js

"use strict";

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

const CONFIG = require('./config');
var projectRoot = CONFIG.projectRoot || path.resolve(__dirname, '../');
var _ENV = CONFIG.env || 'dev';//prod

module.exports = {
    devtool: _ENV != 'prod' ? '#eval-source-map' : false,
    context: __dirname,//http://wxungang.github.io/1104/vue
    entry: {
        app: path.join(projectRoot, './vue/app.js'),
        page: path.join(projectRoot, './vue/page.js')
    },
    output: {
        path: path.join(projectRoot, './build/vue-' + _ENV),
        publicPath: '',//'./build/vue-'+_ENV+'/',//path.join(__dirname, '../src/build/dev/')
        filename: '[name].js',
        chunkFilename: 'chunks/[name].chunk.js',
        // crossOriginLoading: 'anonymous'
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            'vue-router$': 'vue-router/dist/vue-router.common.js'
        },
        modules: ["node_modules"],
        mainFiles: ["index", "app"],
        extensions: [".js", ".json", '.vue']
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this nessessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
                        'less': 'vue-style-loader!css-loader!less-loader'
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.html$/,
                loader: 'vue-html-loader'
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    plugins: [
        //注入一些全局变量
        new webpack.DefinePlugin({
            _ENV_: _ENV,
            _VERSION_: JSON.stringify("1.0.0")
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "commons",
            // (the commons chunk name)

            filename: "vueCommons.js",
            // (the filename of the commons chunk)

            // minChunks: 3,
            // (Modules must be shared between 3 entries)

            // chunks: ["pageA", "pageB"],
            // (Only use these entries)
            children: true,
            // async: true,
        }),
        //可以和entry文件联合配置
        new HtmlWebpackPlugin({
            inject: false,
            title: 'vueJs of app',
            filename: 'app.html',
            template: '../vue/entry/template.ejs',
            scripts: ['./vueCommons.js', './app.js']
        }),
        new HtmlWebpackPlugin({
            inject: false,
            title: 'vueJs of page',
            filename: 'page.html',
            template: '../vue/entry/template.ejs',
            scripts: ['./vueCommons.js', './page.js']
        })
    ]

};

问题:
(目前发现所有用到ajax函数的页面都含有resource.js代码和vue-resource.js)
1、怎样抽离vue-resource.js?[外部共用插件]
2、怎样抽离resource.js?[项目内部封装的工具函数]
3、怎样抽离公共样式文件?[共用的样式组件库和页面样式代码]
4、vue.js抽离在哪个文件了?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

十雾 2022-09-11 12:12:26

使用 CommonsChunkPlugin,具体用法见 CommonsChunkPlugin 的文档

options.minChunks (number|Infinity|function(module, count) -> boolean): The minimum number of chunks which need to contain a module before it's moved into the commons chunk. The number must be greater than or equal 2 and lower than or equal to the number of chunks. Passing Infinity just creates the commons chunk, but moves no modules into it. By providing a function you can add custom logic. (Defaults to the number of chunks)

看得懂吗?看不懂就算了,我没有义务牺牲自己的时间来替你省学英语的时间!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文