Sau khi xây dựng một dự án, tôi có index.html, bundle.js và một số tập tin .css, tôi muốn họ được đặt trong một cấu trúc thư mục như thế này:Webpack tập tin đầu ra để thư mục khác nhau
dist/
- css/all.my.css
- js/bundle.js
- index.html
Dưới đây là những gì tôi đã làm cho .js và .css:
entry: {
app: path.resolve(__dirname, 'app/src/index.js'),
},
output: {
path: path.resolve(__dirname, 'dist', 'css'),
filename: '../js/[name].js'
},
Sau đây là các mô-đun cấu hình tương ứng:
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"
}]
},
tôi ha không có ý tưởng làm thế nào để sao chép index.html từ một thư mục và đặt nó dưới dist /. Tôi biết file-loader là cần thiết nhưng tôi nên viết gì dưới entry và output?
Cảm ơn!
I figured it out và đây là giải pháp:
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
}
Để di chuyển các tập tin css dưới dist/css/:
module: {
loaders: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader')
}]
}
tôi đã sử dụng ExtractTextPlugin, vì vậy để cấu hình đường dẫn đầu ra của tệp css, tôi phải xác định nó trong phần plugins:
plugins: [
new ExtractTextPlugin('./css/bundle.css'), // bundle.css will be put under /dist/css/
]
Để di chuyển hình ảnh và phông chữ vào thư mục riêng của họ: sự chú ý
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]'
}]
}
Pay cách chuỗi loader được định nghĩa: &name=img/[name].[ext] phương tiện sử dụng tên file gốc và phần mở rộng và đặt nó dưới img/thư mục. Cùng đi với các tập tin phông chữ.
Đây là tập tin cấu hình hoàn chỉnh:
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
})
]
}
Bạn sẽ không cần tất cả những thứ trong đó, tôi chỉ muốn thể hiện bức tranh lớn những gì nó trông giống như với tất cả mọi thứ tại chỗ. Chỉ chú ý đến các output, loaders và plugins