Question

我最近从grunt迁移到webpack，我无法想出如何要求/导入我的模板。我看过几个类似issues但没有运气。

这是我的webpack.config文件：

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

    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    var CleanWebpackPlugin = require('clean-webpack-plugin');
    var AssetsPlugin = require('assets-webpack-plugin');


    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    module.exports = {
        entry: {
            app: globby.sync(['./app/app.js','./app/app.run.js', './app/app.config.js', './app/**/*.js']),
            styles: globby.sync(['./content/styles/*.css']),
            images: globby.sync(['./content/images/*.*']),
            vendor: [
           // removed to save space
            ]
        },
        output: {
            filename: './scripts/[name].bundle.js',
            path: path.join(__dirname, "public")
        },
        devServer: {
            port: 1384,
            contentBase: './public/'
        },

        // Enable sourcemaps for debugging webpack's output.
        devtool: 'source-map',

        module: {
            rules: [
                {   test: /\.less$/, 
                    loader: "less-loader",
                    include: path.resolve(__dirname, "content", "styles", "less")
                },
                {
                    test: /\.html$/,
                    use: [
                        {
                            loader: 'ngtemplate-loader',
                            options: {
                                angular: true,
                            },
                        },
                        {
                            loader: 'raw-loader',
                        },
                        {
                            loader: 'html-loader'
                        },
                        {
                            loader: "ngtemplate!html?module=myTemplates&relativeTo=" + 
                            (path.resolve(__dirname, './app/**'))
                        },
                    ],
                    /*
                    exclude: [/node_modules/]
                    */
                },
                {
                    test: /\.css$/,
                    loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
                },
                {
                    test: /\.(ico)$/,
                    loader: "url-loader?name=./[name].[ext]",
                    include: path.resolve(__dirname, "content", "images")
                },
                {
                    test: /\.(jpg|jpeg|gif|png|tiff|svg)$/,
                    loader: "file-loader?name=./images/[name].[ext]",
                    include: path.resolve(__dirname, "content", "images")
                },
                {
                    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'url-loader?minetype=application/font-woff&name=./fonts/[name].[ext]'
                },
                {
                    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'file-loader?name=./fonts/[name].[ext]'
                },
                {
                    test: require.resolve('adal-angular/lib/adal'),
                    loader: 'expose-loader?AuthenticationContext'
                },
                {
                    test: /\.js$/,
                    enforce: "pre",
                    loader: 'source-map-loader'
                }
            ],
        },

        plugins: [
            new webpack.DefinePlugin({
                ADMIN_API_URL: JSON.stringify('http://localhost:41118/api/'),
                API_URL: JSON.stringify('http://localhost:32605/api/'),
                GLOBAL_ADMIN_URL: JSON.stringify('https://adminapi.tradesolution.no/')
            }),
            new HtmlWebpackPlugin({
                template: './app/layout.ejs',
                filename: 'index.html'
            }),
            new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: './scripts/vendor.bundle.js' }),
            new ExtractTextPlugin({ filename: './styles/[name].bundle.css' }),
            /*new CleanWebpackPlugin(['public'], {
                verbose: false
            }),
            */
            new AssetsPlugin({
                filename: 'webpack.assets.json',
                path: './public/scripts',
                prettyPrint: true
            }),
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                'window.$': 'jquery',
                "window.AuthenticationContext": "AuthenticationContext",
                _: 'underscore'
            }),
        ],
        externals: [
            { xmlhttprequest: '{XMLHttpRequest:XMLHttpRequest}' }
        ],


    }

公用文件夹可以使用.js，样式，图像等进行构建。但是简单的导航会导致此错误：

ERROR in ./app/app.config.js
Module not found: Error: Can't resolve 'app/varegruppe/templates/index.html' in 'C:\Users\oystein\work\EPD.SPA\EpdSPA\app'
 @ ./app/app.config.js 50:25-71

以下是如何定义路线的示例：

  $routeProvider.when('/produkteier', {
            templateUrl: require('app/produkteier/templates/view.html')
        })

Answer 1

使用此plugin我设法将所有html文件复制到公共目录中，使用以下配置：

var CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin([
            {from: './app/**/*.html', to: './'}
        ])

使用webpack时无法使用routeprovider加载模板

1 个答案: