构建项目后,我有index.html、bundle.js和一些.css文件,我希望将它们放置在如下所示的目录结构中:
dist/
- css/all.my.css
- js/bundle.js
- index.html
这是我对 .js 和 .css 所做的操作:
entry: {
app: path.resolve(__dirname, 'app/src/index.js'),
},
output: {
path: path.resolve(__dirname, 'dist', 'css'),
filename: '../js/[name].js'
},
以下是相应的模块配置:
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel-loader'],
exclude: /node_modules/
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}]
},
我不知道如何从文件夹复制 index.html
并将其放在 dist/下。我知道需要 file-loader
但我应该在 entry
和 output
下写什么?
谢谢!
<小时/>我想通了,解决方案如下:
output: {
path: path.resolve(__dirname, '../dist'), // this is the output directory, everything will be placed under here
filename: 'js/bundle.js', // move the bundle.js file under the js/ folder, the dir structure will be like this /dist/js/bundle.js
}
将 css 文件移动到 dist/css/
下:
module: {
loaders: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader')
}]
}
我使用了ExtractTextPlugin,因此要配置css文件的输出路径,我必须在plugins
部分中定义它:
plugins: [
new ExtractTextPlugin('./css/bundle.css'), // bundle.css will be put under /dist/css/
]
要将图像和字体移动到它们自己的文件夹中:
module: {
loaders: [{
test: /\.(png|jpg|svg)$/,
loader: 'url-loader?limit=8192&name=img/[name].[ext]'
}, {
test: /\.(woff|woff2|eot|ttf)$/,
loader: 'url-loader?limit=8192&name=fonts/[name].[ext]'
}]
}
注意loader
字符串是如何定义的:&name=img/[name].[ext]
表示使用原文件的名称和扩展名并放在下面img/文件夹。字体文件也是如此。
这是完整的配置文件:
var webpack = require('webpack'),
path = require('path'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
Clean = require('clean-webpack-plugin')
module.exports = {
devtool: 'cheap-module-source-map',
entry: {
app: path.resolve(__dirname, '../app/index.js'),
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'js/bundle.js',
publicPath: '/static/'
},
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel?presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=transform-decorators-legacy'],
include: path.join(__dirname, '../app'),
},{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader')
},{
test: /\.(woff|woff2|eot|ttf)$/,
loader: 'url-loader?limit=8192&name=fonts/[name].[ext]'
},{
test: /\.(png|jpg|svg)$/,
loader: 'url-loader?limit=8192&name=img/[name].[ext]'
}]
},
cssnext: {
browsers: 'last 2 versions'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: [
new Clean([path.join(__dirname, '../dist')], {
root: path.join(__dirname, '..'),
verbose: true
}),
new ExtractTextPlugin('./css/bundle.css', {allChunks: true}),
new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), //ignore locale files from moment.js, saves 300k
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
},
'__DEVTOOLS__': false
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
},
mangle: false
})
]
}
你不需要那里的所有东西,我只是想展示一下大局,所有东西都就位后是什么样子。只关注output
、loaders
和plugins
最佳答案
我认为使用这个npm包可能是个好主意
https://github.com/gregnb/filemanager-webpack-plugin
然后在你的 webpack 配置文件中使用类似的东西将编译的应用程序文件移动到你需要的地方。
new FileManagerPlugin({
onEnd: {
move: [
{source: 'dist/index.html', destination: '../api/modules/web/views/init-build.phtml'},
{source: 'dist/js', destination: '../api/public/js'},
{source: 'dist/images', destination: '../api/public/images'}
]
}
})
例如上面的代码将编译的 ng5 应用程序移动到模块化 Falcon php 应用程序中,并使 SPA 索引文件成为一个 View 。所以 Falcon 可能会用它来渲染 SPA 种子。
关于webpack输出文件到不同的目录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31718908/