मैं HtmlWebpackPlugin का उपयोग करता हूं ताकि वेबपैक संकलन के आउटपुट के साथ index.thml उत्पन्न हो सके।वेबपैक एचटीएमएल प्लगइन: इंजेक्शन फाइलों के क्रम को नियंत्रित करें
प्रदर्शन कारण के लिए मैं विक्रेताओं और परियोजना
ऐसा करने के लिए अपनी प्रविष्टियों को विभाजित:
...
entry:{
vendors:'./vendors.js'
,TimerApp:'./src/index.js'
},
output:{
path: path.join(__dirname,'build'),
filename:'[name].js'
},
...
जब मैं webpack-dev-server द्वारा प्रोजेक्ट को चलाने:
set NODE_ENV=development && webpack-dev-server -d --hot --port 4040 --content-base src/"
मुझेमिल गया है
<head>
...
<title>Timer Task</title>
<link href="vendors.css" rel="stylesheet">
<link href="TimerApp.css" rel="stylesheet">
</head>
<body >
...
<script src="vendors.js"></script>
<script src="TimerApp.js"></script>
verdor.js पहली और TimerApp.js दूसरा। और वह सही है।
webpack --colors --watch --optimize-dedupe
आदेश TimerApp.js पहली और vendors.js दूसरा है और वह मेकअप अपवाद हर बार परियोजना संकलित
बहुत नाराज़:
लेकिन .. जब मैं webpack का उपयोग करें।
तो, आउटपुट फ़ाइलों के क्रम को नियंत्रित करने का तरीका क्या है ??
संदर्भ: webpack.js फ़ाइल: एक प्रकार समारोह के साथ chunksSortMode स्थापित करने के लिए
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var exportRunTimeVariable = new webpack.DefinePlugin({
MODE: {
production: process.env.NODE_ENV === 'production'
}
});
var extractSCSS = new ExtractTextPlugin("[name].css");
module.exports = {
watch: true,
devtool: 'source-map', /*devtool: 'inline-source-map'*/
context: __dirname, /*for node key*/
node:{
__filename:true,
__dirname:true
},
resolve: {
root:[
path.resolve('src')
,path.resolve('node_modules')
,path.resolve('bower_components')
]
//root: __dirname + '/src'
},
entry:{
vendors:'./vendors.js'
,TimerApp:'./src/index.js'
},
output:{
path: path.join(__dirname,'build'),
filename:'[name].js'
},
module:{
loaders:[
/*
test: A condition that must be met
exclude: A condition that must not be met
include: A condition that must be met
loader: A string of "!" separated loaders
loaders: A array of loaders as string
*/
{test:/\.css$/,
loader:extractSCSS.extract('style-loader?sourceMap','css- loader!sass-loader')},
{test: /\.scss$/,
loader: extractSCSS.extract('style-loader?sourceMap','css-loader!sass-loader')},
{test: /\.js$/,
loader: 'ng-annotate',
exclude: /node_modules|bower_components/},
{test: /\.(woff|woff2|ttf|eot|svg)(\?]?.*)?$/,
loader : 'file-loader?name=res/[name].[ext]?[hash]'
},
//{test: /index\.html$/,
// loader : 'file-loader?name=[name].[ext]'
//},
{test: /\.html$/,
loader: 'raw'
,exclude:[/index.html/]},
{test: /\.json/,
loader: 'json'}
]
},
plugins: [
extractSCSS,
exportRunTimeVariable,
new ngAnnotatePlugin({
add: true
// other ng-annotate options here
}),
new HtmlWebpackPlugin({
title: 'Timer Task'
//,filename: ''
,template: 'src/index.html'
})
]
};
शांत! मैं इसे कैसे याद करता हूँ। –