Question

我最近切换到我的项目的webpack（Angularjs 1，AdminLTE，SPA）。

有登录页面和登录页面后。对于登录页面，我要求jquery，bootstrap，angular等，对于登录后页面，我要求所有上述加上数据表，时刻等。

所以我设置我的webpack.config，如

var path = require('path');
var webpack = require('webpack');

const basepath = 'resources/assets/js/angular/';
module.exports = {
    module: {
        rules: [
            {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
            {test: /\.css$/, loader: 'style-loader!css-loader'}
        ],
        noParse: [/moment-with-locales/]
    },
    devtool: 'source-map',
    entry: {
        common: ['jquery','bootstrap', 'fastclick', 'sparklines', 'slimscroll','angular','angular-route', 'oclazyload', 'angular-translate', path.resolve(__dirname, `${basepath}../adminlte/adminlte.js`)],
        angular: [path.resolve(__dirname, `${basepath}app.js`), path.resolve(__dirname, `${basepath}service.js`)],
        login: path.resolve(__dirname, `${basepath}ctrl/login.js`),
        logined: ['datatables.net', 'angular-datatables', 'moment', 'ui-select', 'angular-bootstrap-datetimepicker', path.resolve(__dirname, `${basepath}app2.js`)]            
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'public/js')
    },
    resolve: {
        alias: {
            jquery: "jquery/src/jquery",
            moment: "moment/min/moment-with-locales.js"
        }
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ["common"],
            minChunks: Infinity
        }),
        new webpack.ProvidePlugin({
            moment: "moment"
        })            
    ]
};

但是上面的配置会导致生成的logined.js和angular.js中的时刻代码重复这可能是因为我在app.js中的angular.module（）。run（）中调用了一下因此依赖关系被注入到生成的angular.js

中

我想要的是当前包含在logined.js中的时刻，我可以在任何地方使用它（对于登录后的页面）。

对于登录页面，我将包含common.js，登录页面后，我将包括common.js plus logined.js

我不知道我的概念是否错误，我是webpack的新手。

由于

Answer 1

webpack会做什么？它会将所有内容捆绑到webpack.config中配置的一个文件中，这样您捆绑的每个东西都将在您的应用程序中可用。而不是需要webpack的时刻让你的应用程序处理它，它应该只捆绑一次或只是使用插件并从条目中删除时刻。

使用webpack复制模块

1 个答案: