検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >webpack は optimization_html/css_WEB-ITnose を使用します

webpack は optimization_html/css_WEB-ITnose を使用します

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-06-24 11:29:381231ブラウズ

はじめに

この記事は webpack の入門記事ではありません。webpack について知らない場合は、「Question Ye's Getting Started with Webpack」または Teacher Ruan の Webpack-Demos を参照してください。

Webpack を使用する理由

  1. React などのモジュラー開発フレームワークと一緒に使用することをお勧めします。
  2. gulp が 400 行のコードで実現できる機能を、160 行のコードでほぼ実現できる、比較的使いやすい構成ベースの構築ツールです。
  3. Webpack はメモリを使用してビルド コンテンツをキャッシュするため、ビルド プロセスが高速になります。

3 番目の点について少し説明したいと思います。以前に書いた「Webpack プラグインの書き方 (1)」を読むと、Webpack はファイルの内容をラージ オブジェクトに格納することがわかります。ローダー間のさまざまなプラグイン呼び出しに便利なコンパイル。 gulpもストリーム(パイプ)などのメモリ処理手法を使っていますが、webpackはさらにその先を進んでいるように感じます。 Gulp はタスクごとにストリームを使用しますが、webpack はストリームを共有します。

Webpack 設定の簡単なレビュー

Webpack 設定は主に次の主要なプロジェクト用です:

  • entry: js エントリ ソース ファイル
  • output: 生成されたファイル
  • module: 文字列処理
  • resolve: ファイルpath
  • plugins: ローダーより強力なプラグインは、より多くの webpack API を使用できます

一般的に使用されるローダーの紹介

  • スタイルを処理し、less-loader、sass-loader などの CSS に変換します
  • URL ローダー、ファイル ローダーなどの画像処理。両方を使用する必要があります。そうしないと、サイズ制限を超える画像を対象フォルダーに生成できません
  • jsを処理し、es6以降のコードをes5のコードに変換します。例: babel-loader、babel-preset-es2015、babel-preset-react
  • expose-loader の場合、js モジュールをグローバル世界に公開します

よく使用されるプラグインの紹介

  • コードのホット リプレースメント、 hotmodulereplacementplugin
    • htmlファイル、htmlwebpackplugin
  • cssをインラインの代わりにファイルに拡張します。抽出すること、エラーを抽出します。プロセス
  • 複数の HTML が 1 つの js ファイル (チャンク) を共有する場合、CommonsChunkPlugin
  • を使用してフォルダーをクリーンアップすることができます。Clean
  • たとえば、js で $ を使用したい場合は、モジュールのエイリアス ProvidePlugin を呼び出します。 webpack の場合、$ を jQuery と一致させる必要があります
    • 最適化を使用する
    • 理解する 上記で紹介したローダーとプラグインを理解した後は、基本的に Webpack ベースのビルドの完全なセットを構築できます (gulp と grunt は必要ありませんが、組み合わせた写真）。使用時の最適化ポイントをいくつか紹介します。
    • 最適化ポイント 1. 開発環境と本番環境の区別方法

package.json のスクリプトに環境変数を設定します。Mac と Windows では設定が異なるので注意してください 

"scripts": {    "publish-mac": "export NODE_ENV=prod&&webpack -p --progress --colors",    "publish-win":  "set NODE_ENV=prod&&webpack -p --progress --colors"}

  1. webpack.config のプロセスを使用します.js .env.NODE_ENV で判定

最適化ポイント2. コードホットリプレースメントを利用する

    コードホットリプレースメントを利用すると、開発中にページを更新せずに更新を確認することができます。 また、ビルドしたコンテンツを内部に配置することで、ビルドとコンパイルのパフォーマンスが向上するため、これは公式に推奨されるビルド方法です。
    2. 方法 1:

1. コードをエントリ js ファイルにインライン化します

2. コードホット置換用のプラグインを開始します

方法 2:

server.js を直接実装し、サーバーを起動します (必須)ホット リプレースメント プラグインを開始します)。以下は私がビジネスで使用する例です。一部の特定のパラメーターは webpack.config.js で直接構成できます。この方法は最も簡単ですが、当然のことながら、柔軟性は自分でサーバーを実装するほど良くありません。

最適化ポイント 3. インポートするとファイルが大きくなり、コンパイル速度が遅くなります。どうすればよいですか?

一緒にパッケージ化せずに分離したい場合は、externals を使用できます。次に、3f1c4e4b6b16bbbd69b2ee476dc4f83a を使用して、react を個別に導入します

React を一緒にパッケージ化しても構わない場合は、エイリアスの React ファイルを直接指定してください。 Webpack の検索速度を向上させることができます。デプロイしてオンラインにする準備をするときは、ファイル サイズを (約 600 kb ずつ) 減らすことができる、react.min への変更を忘れないでください

依存関係のない、react.min.js などの独立したモジュールには module.noParse を使用してください、より速くなります。

  1. 最適化ポイント 4. モジュールをグローバル世界に公開する

    レポート データ レポート コンポーネントをグローバルに配置する場合は、2 つの方法があります:
  2. 方法 1:

    ローダーで Expose を有効にしてレポートを公開するグローバルな世界にアクセスし、レポートを直接使用してレポートすることができます

    var webpack = require('webpack');var webpackDevMiddleware = require("webpack-dev-middleware");var webpackDevServer = require('webpack-dev-server');var config = require("./webpack.config.js"); config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000");  // 将执替换js内联进去config.entry.index.unshift("webpack/hot/only-dev-server");var compiler = webpack(config);var server = new webpackDevServer(compiler, {    hot: true,    historyApiFallback: false,    // noInfo: true,    stats: {         colors: true  // 用颜色标识    },    proxy: {        "*": "http://localhost:9000" // 用于转发api数据，但webpack自己提供的并不太好用    },});server.listen(9000);

    3. 方法二：

    如果想用R直接代表report，除了要用expose loader之外，还需要用ProvidePlugin帮助，指向report，这样在代码中直接用R.tdw， R.monitor这样就可以

    new webpack.ProvidePlugin({    "R": "report",}),

    优化点五. 合并公共代码

    有些类库如utils, bootstrap之类的可能被多个页面共享，最好是可以合并成一个js，而非每个js单独去引用。这样能够节省一些空间。这时我们可以用到CommonsChunkPlugin，我们指定好生成文件的名字，以及想抽取哪些入口js文件的公共代码，webpack就会自动帮我们合并好。

    new webpack.optimize.CommonsChunkPlugin({    name: "common",    filename: "js/common.js",    chunks: ['index', 'detail]}),

    优化点六. 善用alias。

    resolve里面有一个alias的配置项目，能够让开发者指定一些模块的引用路径。对一些经常要被import或者require的库，如react,我们最好可以直接指定它们的位置，这样webpack可以省下不少搜索硬盘的时间。

    优化点七.多个html怎么办

    1. 使用HtmlWebpackPlugin，有多少个html，就排列多少个，记得不要用inject，否则全部js都会注入到html。如果真的要用inject模式，请务必将不需要的js用exclude chunk去掉或者用chunk参数填上你需要入口文件。

    仅使用app作为注入的文件：

    plugins: [  new HtmlWebpackPlugin({    chunks: ['app']  })]

    不使用dev-helper作为注入文件：

    plugins: [  new HtmlWebpackPlugin({    excludeChunks: ['dev-helper']  })]

    如果你不想用inject模式，但又想使用html-webpack-plugin，那你需要在html里用3f1c4e4b6b16bbbd69b2ee476dc4f83a标签放入对应的js，以及用入对应的css。记住，这些资源的路径是在生成目录下的，写路径的时候请写生成目录下的相对路径。

    优化点八. html-webpack-plugin不用使inject模式没又md5，而且不支持文件内联怎么破？

    当时我就给维护者提了一个issue– Add inline feature to the plugin 。

    然后维护者在 开发的分支 上加了这么一个特性（证明维护者不想在插件里加内联功能了，想让我来弄）：

    事件

    允许其它插件去使用执行事件

    html-webpack-plugin-before-html-processing

    html-webpack-plugin-after-html-processing

    html-webpack-plugin-after-emit

    使用办法：

      compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {    htmlPluginData.html += 'The magic footer';    callback();  });

    不过我还是决定自己开发一个了一个插件

    html-res-webpack-plugin ，有中英文文档可以参考。其实html-webpack-plugin以js作为入口可能跟webpack的理念更为一致，但其实直接在html上放link和script更加方便直白一些。而且html-webpack-plugin局限性太多，如果我想在script上加attribute也是比较麻烦的事儿。所以我干脆开发一个可以允许在html上直接放link和script而且支持内联及md5的插件。

    但相信我之后也会针对html-webpack-plugin再写一个内联及md5的插件，适配一直在用这个插件的人。

    优化点九.用gulp-webpack速度慢乍办

    上图是初始化构建30个文件的用时，一共用了13秒。用了externals优化后，还有100多kb，比用纯webpack优化要大50多kb。而且，由于你用的是gulp-webpack，每次有文件改动，都必须全部重新编译一次。因此，跟react搭配建议还是不要用gulp-webpack。因为如果你使用webpack的话，即使初次启动时速度也并不快，但开发过程中，webpack会自动识别，只会重新编译有修改的文件，这大大加快了编译构建速度。

    没办法，老项目改造，真的要用，乍办？我提供以下思路

    （1）当非js文件改变的时候，不要去跑js打包的任务

    （2）非公共的js发生改变的时候，只执行这个js的打包任务

    下图是优化了之后，在开发过程中非公共文件修改后的编译速度。我的娘，纯webpack只需要100多200ms。建议还是用webpack吧。

    优化点十.如果在通过webpack在项目中使用bootstrap, jquery以及fontawesome

    这一点对于创业公司来说可能比较有用，它们的初期产品都需要快速上线，用一些比较成熟的UI框架会比较好。

    这样，首先我们需要jquery文件，并且安装bootstrap(3.3.5) ,font-awesome(4.4.0),以及imports-loader(0.6.3)。还需要sass-loader(3.1.2)及less-loader(2.5.3)。

    然后，在主要入口文件要这么引用下面的样式文件：

    require('bootstrap/less/bootstrap.less');require('font-awesome/scss/font-awesome.scss');require('./index.scss');

    在webpack.config.js的entry项目里，可以加上这个vendor:

    common: ['jquery', 'bootstrap'],

    在loaders里加入以下loader，将jQuery暴露到全局:

    {    test: path.join(config.path.src, '/libs/jq/jquery-2.1.4.min'),    loader: 'expose?jQuery'},

    再添加以下loader，让webpack帮助复制font文件

    {         test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,          loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]' },

    在plugins里添加ProvidePlugin，让$指向jQuery

    new webpack.ProvidePlugin({    $: "jquery",    jQuery: "jquery"}),

    这样，就可以同时使用jQuery, Bootstrap和Fontawesome了。

    webpack会取代gulp吗

  • 未必，但在开发环境，以及不需要一些功能如合图的情况下，webpack可以完全取代gulp，至少现在我有三个项目完全用webpack进行开发和部署上线
  • 要取代gulp,还需要不断发展它的loader以及plugin生态，至少，完善一下开发者文档啊。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS モジュールの詳細な説明と React_html/css_WEB-ITnose での実践次の記事：CSS モジュールの詳細な説明と React_html/css_WEB-ITnose での実践

関連記事

続きを見る