2017-09-24 121 views
0

其實,我爲我的網站編寫了使用reactjs的webpack。因爲我有很多圖像和scss文件,所以創建bundle.js文件需要花費更多的時間,直到網站處於加載狀態。那麼,我該如何提高執行速度。如何提高webpack的執行速度?

webpack.config.js

const path = require("path"); 
 
const webpack = require("webpack"); 
 
const CopyWebpackPlugin = require("copy-webpack-plugin"); 
 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
 

 
let config = { 
 
    entry: ["babel-polyfill", "./app/js/index.js"], 
 
    output: { 
 
    path: path.resolve(__dirname, "public"), 
 
    filename: "./build.js", 
 
    //publicPath: "/" 
 
    }, 
 
    resolve: { 
 
    alias: { 
 
     "js": path.resolve(__dirname, "app/js"), 
 
     "css": path.resolve(__dirname, "app/css") 
 
    }, 
 
    extensions: [".js", ".jsx"] 
 
    }, 
 
    module: { 
 
    rules: [ 
 
     {test: /\.(js|jsx)$/, loader: "babel-loader"}, 
 
     { 
 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
 
     loader: 'url-loader' 
 
    }, 
 
     {test: /\.scss$/, loader: ExtractTextPlugin.extract(["css-loader", "sass-loader"])}, 
 
     {test: /\.(jpg|gif|png)$/, loader: "file-loader", options: {name: "./images/[name].[ext]"}}, 
 
    ] 
 
    }, 
 

 
    devServer: { 
 
    historyApiFallback: true 
 
    }, 
 
    plugins: [ 
 
    new HtmlWebpackPlugin({ 
 
     template: "./app/index.html" 
 
    }), 
 
    new webpack.LoaderOptionsPlugin({ 
 
     options: { 
 
     sassLoader: { 
 
      includePaths: ["app/css"] 
 
     } 
 
     } 
 
    }), 
 
    new ExtractTextPlugin({ 
 
     filename: "style.css", 
 
     allChunks: true 
 
    }) 
 
    ] 
 
}; 
 

 
if (process.env.NODE_ENV === "production") { 
 
    config.plugins.push(
 
    new webpack.DefinePlugin({ 
 
     "process.env": { 
 
     "NODE_ENV": JSON.stringify(process.env.NODE_ENV) 
 
     } 
 
    }), 
 
    new webpack.optimize.UglifyJsPlugin() 
 
); 
 
} 
 

 
module.exports = config;

+0

發佈webpack配置和您用於開發和創建生產版本的命令 – samsonthehero

+0

您正在使用哪個webpack版本?發佈你的webpack.config.js文件 - 它會幫助我們幫助你。 – gillyb

+0

@gillyb我附上我的代碼 – satya

回答

1

除了調整你的配置,你可以使用webpack --watch擁有的WebPack看你的源文件,每當你改變一些東西重新編譯。第一次編譯仍然是完整的,但在此之後,每次只重新編譯必要的部分,這可以將編譯時間從30秒縮短到1秒或2秒。

更妙的是成立的WebPack的devserver用熱重裝,這也手錶和增量編譯,但除了將在瀏覽器更新您的應用程序,這樣你就不會需要重新加載頁面,並失去反應狀態。設置起來可能有點挑剔,但這很麻煩。

+0

我編輯了我的帖子,請檢查 – satya

+0

'--watch'應該適用於任何webpack配置。有關如何設置熱重新加載的示例,可以通過https://gaearon.github.io/react-hot-loader/getstarted/ – Oblosys

+0

@satya查看Dan Abramov的帖子:使用'--watch'不起作用? – Oblosys