我想我会从我的webpack配置开始。
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 dev服务器上运行时工作正常,但我想弄清楚它是如何在生产环境中组合在一起的。
正如您所看到的,根据sass-loader文档,如果[name].[contenthash].css
设置为NODE_ENV
,我将创建一个名为production
的文件。我喜欢根据内容哈希提供文件的想法,因为我喜欢诚信。
我遇到的困难是了解如何将该文件名,内容哈希传递到我正在创建的index.html模板中,以便我可以<link>
样式表。
我只是不明白这两个组件是如何组合在一起产生可发布的构建的。 HtmlWebpackPlugin
在输出目录中生成了一个.html,但显然它没有天生的理解在哪里找到它的样式。
答案 0 :(得分:2)
您的配置似乎正确。
有没有办法在生产时将该文件名传递给HTML模板?
应该发生的是HtmlWebpackPlugin
应该在index.html
目录中创建一个新的buildPath
文件,其中生成的包会自动注入其中(例如生成的CSS) bundle将被注入head
标记,并生成的脚本包位于body
标记的底部)
除此之外,只需向访问您网站/应用的人dist/index.html
提供服务即可。 <答案
它是服务器端的东西吗?
是的。
尝试在没有开发服务器的情况下进行构建,只需运行webpack
,这样就可以看到配置的输出(开发服务器在内存中构建内容,因此您实际上无法看到它们)< / p>