使用webpack将资产文件夹推送到公共目录 [英] push assets folder to public directory with webpack
问题描述
我第一次使用Webpack.目前,一切工作都很好.我的问题是当我尝试构建 dist
文件夹时.目前,我得到了 index.html
和 bundle.js
文件,但是我不知道如何将资产推送到 dist
文件夹.
I'm using Webpack for the first time. Currently everything is being served up quite nicely. My problem is when I'm trying to build a dist
folder. Currently I get my index.html
and bundle.js
files but I can't figure out how to push my assets to the dist
folder.
我已经加载了文件加载器,但实际上似乎并没有执行我想要的操作,并且我运行的所有Google搜索都没有告诉我我需要知道的内容.下面是我的配置文件.有人可以将一匹马带到水上吗?同样,一旦我运行它,是否需要将所有图像导入到我的React组件中?
I have file-loader loaded up but it doesn't actually seem to do what I want it to and none of the google searches I've run are telling me what I need to know. Below is my config file. Can someone lead a horse to water? Also once I get it running do I need to import all of images to my React components?
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]},
{ test: /\.(png|jpe?g|svg|)$/, use: { loader: 'file-loader', options: }}
]
},
devServer: {
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
]
};
推荐答案
好像我只需要使用要将所有资产从"app/assets/"复制到"dist/assets/",我只需要这样做:
To copy all the assets from 'app/assets/' to 'dist/assets/' I just needed to do:
plugins: [
new CopyWebpackPlugin([
{ from: 'app/assets', to: 'assets' }
])
]
这篇关于使用webpack将资产文件夹推送到公共目录的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!