内容散列，ExtractTextPlugin和HtmlWebpackPlugin

我想我会用我的WebPack配置开始。内容散列，ExtractTextPlugin和HtmlWebpackPlugin

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

/** 
* Environment 
*/ 
const nodeEnv = process.env.NODE_ENV || 'development'; 
const isProduction = nodeEnv === 'production'; 
const isDevelopment = !isProduction; 

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

const sourcePath = path.join(__dirname, 'assets'); 
const buildPath = path.join(__dirname, 'dist'); 

const extractSass = new ExtractTextPlugin({ 
    filename: '[name].[contenthash].css', 
    disable: isDevelopment 
}); 

/** 
* Plugins 
*/ 
const plugins = [ 
    new HtmlWebpackPlugin({ 
    template: path.join(sourcePath, 'index.html'), 
    }), 
    extractSass 
]; 

if (isProduction) { 
} else { 
    plugins.concat([ 
    new webpack.HotModuleReplacementPlugin(), 
    ]); 
} 

module.exports = { 
    entry: ['./assets/app.js', './assets/app.scss'], 
    devtool: isProduction ? 'eval' : 'source-map', 
    plugins: plugins, 
    module: { 
    rules: [{ 
     test: /\.scss$/, 
     use: extractSass.extract({ 
     use: [{ 
      loader: "css-loader" 
     }, { 
      loader: "sass-loader" 
     }], 
     // use style-loader in development 
     fallback: "style-loader" 
     }) 
    }] 
    }, 
    output: { 
    filename: 'bundle.js', 
    path: buildPath 
    }, 
    devServer: { 
    contentBase: buildPath, 
    port: 9000 
    } 
};

在webpack开发服务器上运行时，这一切都正常，但我试图弄清楚这是如何适应生产环境。

正如你所看到的，因为每SASS装载机的文档，我创建一个如果NODE_ENV设置为production称为[name].[contenthash].css文件。我喜欢基于内容哈希来提供文件的想法，因为我喜欢诚信。

我遇到的困难是了解如何通过该文件名，将该内容散列到我创建的index.html模板中，以便我可以将<link>样式表。

它是一个服务器端的事情吗？
有什么方法来传递文件名到HTML模板上生产？
是不是故意的，我做手工或脚本吧？

我只是不明白这两个组件是如何聚集在一起产生可发布构建。 HtmlWebpackPlugin在输出目录中产生了一个.html文件，但显然它没有天生的理解在哪里找到它的样式。

来源

2017-03-21 Richard Vanbergen

你的配置似乎是正确的。

有什么办法将该文件名传递到生产中的HTML模板上吗？

应该怎样发生的是，HtmlWebpackPlugin应该创建一个新的index.html文件在您buildPath目录，里面有生成的捆绑在它自动注入（例如生成CSS束将在head标签注入和在body标签底部生成的脚本包）

除此之外，它只是为dist/index.html服务谁访问您的网站/应用程序的问题。所以答案

它是一个服务器端的事情吗？

是肯定的。

尝试做一个构建，而不开发服务器，只需运行webpack，所以你可以看到你的配置的输出（开发服务器在内存中建立的东西，所以你实际上并没有看到它们）

来源

2017-03-21 23:21:49

我这将不得不回到你身边。抱歉，久等了。 –

内容散列，ExtractTextPlugin和HtmlWebpackPlugin

回答

相关问题