使用webpack服务静态资产
我试图从webpack提供静态资产,但我现在正在使用copywebpack插件将任何需要的静态资产复制到我的static\u dist/目录中,这也是我的构建文件所在的位置。虽然这种方法可行,但我现在还需要提供构建过程之后生成的stats文件stats.json。我不能破解这个并使用copywebpackplugin,因为当copywebpackplugin运行时,这个文件还不存在。我有点被所有的webpacks配置选项弄得不知所措,而且似乎没有任何东西可以为这些静态文件提供服务 //my webpack.config.js使用webpack服务静态资产,webpack,static,assets,webpack-dev-server,Webpack,Static,Assets,Webpack Dev Server,我试图从webpack提供静态资产,但我现在正在使用copywebpack插件将任何需要的静态资产复制到我的static\u dist/目录中,这也是我的构建文件所在的位置。虽然这种方法可行,但我现在还需要提供构建过程之后生成的stats文件stats.json。我不能破解这个并使用copywebpackplugin,因为当copywebpackplugin运行时,这个文件还不存在。我有点被所有的webpacks配置选项弄得不知所措,而且似乎没有任何东西可以为这些静态文件提供服务 //my we
const PATHS = {
app: path.join(__dirname, '../src/static'),
build: path.join(__dirname, '../src/static_dist')
};
const basePath = path.resolve(__dirname, '../src/static/');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
output: {
filename: '[name].js',
path: PATHS.build,
publicPath: '/static/'
},
devServer: {
watchOptions: {
aggregateTimeout: 300,
ignored: /node_modules/,
poll: 1000,
},
port: 3000,
contentBase: '/static/',
host: '0.0.0.0',
disableHostCheck: true,
historyApiFallback: { index: '/static/index.html' },
public: 'localhost:8000',
writeToDisk: true,
// hot: true
},
plugins: [
new CopyPlugin([
{ from: '../static/assets/img/favicons', to: '../static_dist/favicons' },
{ from: '../static/assets/img/logos', to: '../static_dist/logos' },
{ from: '../static/assets/img/icons', to: '../static_dist/icons'},
]),
new BundleTracker({ path: PATHS.build, filename: './stats/webpack-stats.json'})
],
}
现在,我的捆绑包可以在
domain.com/static/app.[some hash].js
和logo上访问,例如,可以在domain.com/static/logo/somelogo.png
上访问。似乎大多数人都没有从同一个目录中获得这些服务,但我并不特别关心这些服务来自何处。只是我可以提供生成后生成的stats文件。所以您必须等到webpack编译完成。您可以使用一个插件编写自己的插件。这是一个示例脚本。Untestet
// fs-extra to copy files (npm install fs-extra)
const fs = require('fs-extra');
const path = require('path');
// own plugin: do what ever
class MyPlugin {
apply(compiler) {
compiler.hooks.afterCompile.tap('MyPlugin', (compilation) => {
// copy all files and folder (recursive)
fs.copySync(path.resolve(process.cwd(), 'static/assets/img/favicons'), path.resolve(process.cwd(), 'static_dist/favicons'), { recursive: true })
// return true to emit the output, otherwise false
return true;
});
}
};
//...
// append your plugin to webpacks plugin section
plugins: [
//...
new MyPlugin(),
//...
]