Question

我有理解如何使用webpack捆绑glyphicons的问题。

这是我的webpack文件

module.exports = {
    context: path.join(__dirname, "app"),
    devtool: 'source-map',
    entry: {
        main: ["./main.coffee"],
        vendor: ["./vendor.coffee"]
    },
    resolve: {
        extensions: [".coffee", ".js", ".json", ".css", ".less", ".html"]
    },
    output: {
        path: path.join(__dirname, 'wwwroot'),
        filename: '[name].js',
        chunkFilename: '[id].chunk.js',
    },
    module: {
        rules: [
            {
                test: /\.coffee$/,
                use: ['coffee-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.less$/i,
                use: css.extract({
                    fallback: "style-loader",
                    use: ['css-loader', 'less-loader']
                }),
                exclude: /node_modules/
            },
            { 
                test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
                loader: 'url-loader?limit=100000' 
            }
        ]
    },
    plugins: [
        css,
        new cleanWebpackPlugin(["./wwwroot"])
    ],
    optimization: {
        splitChunks: {
            minSize: 2,
            name: true
        }
    }
}

这是我从webpack获得的输出

Child extract-text-webpack-plugin ../node_modules/extract-text-webpack-plugin/dist ../node_modules/css-loader/index.js!../node_modules/less-loader/dist/cjs.js!app.less:
    [0] ../Content/fonts/glyphicons-halflings-regular.eot 26.5 KiB {0} [built]
    [1] ../Content/images/nice_snow.png 23.9 KiB {0} [built]
    [2] ../Content/fonts/glyphicons-halflings-regular.svg 82.2 KiB {0} [built]
    [3] ../Content/fonts/glyphicons-halflings-regular.ttf 53.7 KiB {0} [built]
    [4] ../Content/fonts/glyphicons-halflings-regular.woff 30.4 KiB {0} [built]
    [7] ../node_modules/css-loader!../node_modules/less-loader/dist/cjs.js!./app.less 139 KiB {0} [built]
        + 2 hidden modules

这里是我如何导入glyphicons（它解析路径很好，你可以通过webpack输出消息告诉）

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../@{icon-font-path}@{icon-font-name}.eot');
  src: url('../@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
       url('../@{icon-font-path}@{icon-font-name}.woff') format('woff'),
       url('../@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
       url('../@{icon-font-path}@{icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
}

最后，这是我得到输出的文件夹结构

 - wwwroot
    1. app.css
    2. app.css.map
    3. main.js
    4. main.js.map
    5. vendor.js
    6. vendor.js.map

现在，一切都按预期工作。所有java脚本都捆绑在一起，css也是如此。只有glyphicons没有出现。

webpack 4，捆绑glyphicons

0 个答案: