Webpack(一)先端項目包装配置

16342 ワード

Webpack

前提
グローバル環境でnodejsをインストールします.
使用
1、依存パッケージの設置
プロジェクトにnpm管理がない場合、package.jsonファイルがありません.
初期化項目はnodejsプロジェクトです.

npm init

必要情報を入力する

は、package.jsonファイル

を生成する.
インストールwebpack依存

cnpm install webpack --save -dev

–save:インストールしながら、依存パケットをpackage.jsonに書き込むことを示す

-dev:devDependency(開発依存パケット)に依存することを表す

Loader,style,css,svg,url,file,font-awesomeおよびpostCssをインストールします.

cnpm install style-loader css-loader svg-url-loader url-loader file-loader font-awesome-webpack postcss-webpack --save -dev

style-loader:ページ内にあるstyleラベルのcss

を処理する.

css-loader:cssファイルのurlを処理する(このような表記はcssとjsを別々に包装するためにプラグインExtractTextPluginを利用する)

            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
},

svg-url-loader:svgピクチャ処理

            {
                test: /\.(svg|eot|woff|ttf)\w*/,
                loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
},

url-loader:

1.ファイルサイズがlimitパラメータより小さい場合、url-loaderはファイルをData URLに変換します.

.ファイルサイズがlimitより大きく、url-loaderがfile-loaderを呼び出して処理し、パラメータも直接file-loaderに伝えます.パラメータがあります.

{
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=8192&name=css/images/[name].[ext]'
},

file-loader:解析項目のurl導入(cssに限らず)は、私達の構成によって、画像を相応のパスにコピーして、更に私達の構成によって、パッケージ化後のファイル参照経路を修正して、正しいファイルを指すようにします.パラメータがあります.

{
                test: /\.xsl$/,
                loader: "file-loader?name=[name].[ext]"
}

url-loaderとfile-loaderは4つのパラメータに関連しています.limit、name、outputPath、publicPath.

において、limitは既に説明しましたが、url-loaderに対して、ファイルが何バイト未満の場合、ファイルをエンコードしてData URLに戻ります.

file-loaderに関するものはname、outputPath、およびpublicPathである.この3つのパラメータを説明します.

nameは出力のファイル名ルールを表しています.このパラメータを追加しないと、出力はデフォルト値です.ファイルのハッシュです.

に「パス」を追加すると、出力ファイルの相対パスは現在のファイルと同じです.「name」を加えて、「ext」は出力ファイルの名前と拡張子が現在と同じです.

に「path」というパラメータを加えると、パッケージ化されたファイルの参照ファイルのパスにもこの相対パスが追加されます.

outputPathは出力ファイルパスプレフィックスを表します.

写真はurl-loaderを経由して包装されます.指定された出力フォルダの下に包装されます.

ですが、出力フォルダの画像のパスを指定できます.

例えば、OutputPath=img/については、画像をパッケージ化すると、出力フォルダの下に新しい(もしないなら)フォルダを作成し、画像を

に保存します.

publicPathは、パッケージファイル中の参照ファイルのパスプレフィックス

を表しています.

もしあなたの写真がCDNに保存されているなら、オンラインでこのパラメータを加えることができます.値はCDNアドレスです.このようにすれば、プロジェクトがオンラインになった後のリソース参照経路がCDNに向けられます.

font-awesome-webpack:処理フォントファイル

postcss-webpack

extract-text-webpack-plugin:cssとjsを分離して

を包装します.

clean-webpack-plugin:包装前にターゲットフォルダをクリアする

copy-webpack-plugin:直接ファイルまたはフォルダを対象ディレクトリ

にコピーする.
プロジェクトがnpmで管理されている場合、package.jsonファイルが含まれています.

直接にすべての依存

をインストールします.

cnpm install

2、配置ファイルwebpack.co.nfig.js

まず入り口ファイルindex.jsを新規作成します.
各種必要なjsやcssなどのファイルを紹介します.

require('./js/lib/jquery/jquery.js');
require('./js/lib/jquery/jquery-1.9.1.min.js');
require('./js/lib/jquery/jquery.colorbox.js');

require('./js/common/common.js');
require('./js/main.js');
require('./js/carousel.js');
// require('./js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML');

require('./css/iconfont.css');
require('./css/colorbox.css');
require('./css/by.css');
require('./css/jo-dhh.css');

require('./xslt/jats2html.xsl');

webpackパケットを導入する

var webpack = require("webpack");

パッケージエントリと出力パス、ファイル名を設定します.
同前dirnameは現在のディレクトリです.

entry: {
        index: __dirname + "/index.js",
        // vendor:['jQuery'],
    },
    output: {
        path: __dirname + "/dist",
        //           
        filename: "bundle.js"
    },

jsとcssを別々に包装するためには、プラグインextract-text-webpack-plugn

を導入する必要があります.

var ExtractTextPlugin = require("extract-text-webpack-plugin");

moduleにおけるloaderパラメータのうち、cssに対する処理部分は

{
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
},

pluginsにcssファイルを追加して包装した出力先とファイル名

new ExtractTextPlugin("style.css")

説明:ここでパラメータフォーマットの表示をfallback、use形式に設定しないと、後でパッケージ化時にcssファイルのエラーが発生します.

は、画像を処理する.
画像には三つの処理方法があります.一つの画像はcssで背景スタイルに設定されています.ここで直接に識別して目的フォルダに入れることができます.

{
                test: /\.(png|jpg|gif)$/,
                loader: 'file-loader?name=images/[name].[ext]'
},

もう一つは、htmlのSrcを通じて導入されたもので、webpackはhtmlのサポートに友好的ではないので、プラグインhtml-webpack-pluginを借りる必要があります.
三つ目はコピープラグインを借りて、直接にすべての画像をコピーすることです.本プロジェクトの画像はxsletで参照されるので、3つ目と1つ目の組み合わせで画像を処理し、pluginパラメータに追加します.

new CopyWebpackPlugin([
            {
                from: 'css/images',
                to: 'images'
            },
            {
                from: 'xmlsample',
                to: 'xmlsample'
            },
            {
                from: 'js/MathJax',
                to: 'MathJax'
            }

]),

フォントファイルの処理
ここで注意が必要です.フォントファイルのcssスタイルと他のリソースファイルのパスは問題に対応しています.

=>cssが残りのcssと一緒に包装されると、fontsリソースへの参照経路が自動的に変化します.注意してください.大きな穴です.

{
                test: /\.(svg|eot|woff|ttf)\w*/,
                loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
            },

残りのフォーマットのファイル処理は、主にxmlをxsletで変換するので、xsletも処理する必要があります.

{
                test: /\.xsl$/,
                loader: "file-loader?name=[name].[ext]"
}

は複数のファイルを一つのファイルにパッケージすることに関連しているので、source-mapマッピングをオンにし、デバッグしやすく、リリースバージョンはこの機能

をオフにすることができます.

devtool: 'source-map',

残りのファイルをコピーする

var CopyWebpackPlugin = require("copy-webpack-plugin");

new CopyWebpackPlugin([
            {
                from: 'css/images',
                to: 'images'
            },
            {
                from: 'xmlsample',
                to: 'xmlsample'
            },
            {
                from: 'js/MathJax',
                to: 'MathJax'
            }

        ]),

包装の結果は毎回違っているかもしれませんので、毎回包装する前に手動でdistフォルダを削除する必要があります.不便です.インターネットで目的フォルダを自動的に削除できるプラグインを見つけました.
怠惰こそ最大の生産力です.

var CleanWebpackPlugin = require("clean-webpack-plugin");

new CleanWebpackPlugin(
            ['dist'],
            {
                root: __dirname,       　　　　　　　　　　//   
                verbose: true,        　　　　　　　　　　//          
                dry: false        　　　　　　　　　　//      
            })

プロファイルコード

を設定します.

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
    entry: {
        index: __dirname + "/index.js",
        // vendor:['jQuery'],
    },
    output: {
        path: __dirname + "/dist",
        //           
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            // [hash:8]
            // {
            //     test: /\.(png|jpg|gif)$/,
            //     loader: 'url-loader?limit=8192&name=css/images/[name].[ext]'
            // },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'file-loader?name=images/[name].[ext]'
            },
            {
                test: /\.(svg|eot|woff|ttf)\w*/,
                loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
            },
            {
                test: /\.xsl$/,
                loader: "file-loader?name=[name].[ext]"
            }
        ]
    },
    devtool: 'source-map',
    plugins: [
        new ExtractTextPlugin("style.css"),
        // new webpack.optimize.CommonsChunkPlugin({
        //     names: ['vendor', 'manifest'],
        // }),
        new CopyWebpackPlugin([
            {
                from: 'css/images',
                to: 'images'
            },
            {
                from: 'xmlsample',
                to: 'xmlsample'
            },
            {
                from: 'js/MathJax',
                to: 'MathJax'
            }

        ]),
        new CleanWebpackPlugin(
            ['dist'],
            {
                root: __dirname,       　　　　　　　　　　//   
                verbose: true,        　　　　　　　　　　//          
                dry: false        　　　　　　　　　　//      
            })
    ]
}

Express NodeJs Webフレーム学習ノート(二)