AngularJS和Webpack4

时间:2018-08-30 13:59:42

标签: angularjs webpack gulp bower

我有一个AngularJS(1.5)项目,其中:

  1. 鲍尔
  2. SCSS
  3. 资源(svg,png,jpg)
  4. Ejs

我需要传输它才能与Webpack4一起使用,包括热重装。 当前,我们正在使用grunt进行构建。

我当前的webpack.config.js是:

const path                  = require('path');
const pkg                   = require('./package.json');
const webpack               = require('webpack');

const HtmlWebpackPlugin     = require("html-webpack-plugin");
const ExtractTextPlugin     = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin  = require("mini-css-extract-plugin");

module.exports = {
    context: path.resolve(__dirname, 'public'),
    entry: [
        './js/app.js'
    ],
    output: {
        path: __dirname + "/dist",
        filename: "[name].bundle.js",
    },
    resolve: {
        modules: ['./public/lib', 'node_modules'],
        descriptionFiles: ['package.json', 'bower.json'],
        extensions: ['.js', '.json', '.html']
    },
    devtool: process.env.NODE_ENV !== 'production' ? "eval-source-map" : "source-map",
    module: {
        rules: [
            {
                test: /\.ejs/,
                use: [
                    {
                        // loader: "ejs-webpack-loader",
                        loader: "raw-loader",
                        options: {
                            htmlmin: false
                        }
                    }
                 ]
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "[name].css"
        }),
        new HtmlWebpackPlugin({
            template: '!!raw-loader!' + path.join(__dirname, 'public/views/index-output.ejs'),
            filename: 'index-build.ejs', // this line decide the extension of output file.
            minify: {
                removeComments: true,
                // collapseWhitespace: true,
                conservativeCollapse: true
            }
        })
    ]
};

但这对我不起作用。 有人可以帮我一些提示吗?

谢谢

0 个答案:

没有答案