8
私はを使用して、index.thmlを自動的に生成し、webpackの出力をコンパイルします。私はwebpack-dev-serverでプロジェクトを実行するときwebpackHtmlPlugin：注入されたファイルの順序を制御する
...
entry:{
vendors:'./vendors.js'
,TimerApp:'./src/index.js'
},
output:{
path: path.join(__dirname,'build'),
filename:'[name].js'
},
...
：
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の使用している場合：
webpack --colors --watch --optimize-dedupe
を順序はTimerApp.js第一およびvendors.js二 であり、それが
をコンパイルするたびにプロジェクトは非常にイライラ例外を作ります。
出力ファイルの順序を制御する方法は何ですか？
参照：webpack.jsファイル：
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'
})
]
};
クール！どのように私はそれを逃す。 –