一歩前へのwebpack

3213 ワード

javascript webpack

最近は体系的に勉強するつもりです.この文章は継続的に更新されます.自分がwebpackを使って出会った問題、踏んだ穴などを記録します.白さんの間違いは法の目に入らずに通過すればいいです.
よくある用法webpackのmodule属性はloader属性に関連している.
見た後、webpack最新版のloaderルールには、loader属性ではないという話がありました.代わりにuse属性です.useはloaderの略字だという話もあります.こちらはあまり確定していません.オーディエンスたちもコメントして教えてくれます.試してみました.use以上のバージョンで下記の操作をしました.

      //...
     {
        test: /\.vue$/,
        // use: ['vue-loader']
        loader: ['vue-loader']
      },
      //...

私が所属しているプロジェクトはまだ影響を受けていませんので、簡単に書く可能性は大きいと思いますが、第一の言い方はwebpack4と書き方に対応しています.新しいバージョンの文書は全部webpackを採用していますので、useを採用すればいいです.
資料を調べてuseと違った書き方が出ました.作者:花柄先端_u u金を掘る

直接loader module.export={

module:{
    rules:[
        {
            test: /.js$/,
            loader: 'my-loader',
            exclude: /node_modules/
        },
    ]
}

}

を書きます.

はloaderを使用して、文字列形式

module.exports={
    module:{
        rules[
             {
                test: /.js$/,
                use: 'my-loader',//       
                exclude: /node_modules/
            },
        ]
    }
}

は、useを使用し、オブジェクト形式

module.exports={
    module:{
        rules[
             {
                test: /.js$/,
                use: {  //    ，   loader    
                    loader:'my-loader',
                    options:{}//       loader
                }
                exclude: /node_modules/
            },
        ]
    }
}

を使用する.

はuseを使用し、配列形式配列内の各項目は文字列であっても良いし、オブジェクトであっても良い.

module.exports = {
    module: {
        rules: [
            {
                test: /.js$/,
                use: [
                    'my-loader1',//     
                    { loader: 'my-loader2', options: {} }//    
                ],
                exclude: /node_modules/
            },
        ]
    }
}

行の内loaderの書き方:複数のloaderの間で使います!分割します

let something=require('loader2!loader1!./profile.js')

行のloaderは、現在のファイルが他のloaderによって処理されているかどうかを表すプレフィックスを追加することができる.useは書類を再通過させないという意味です.-!処理しましたpre+normal loaderは譲りません.!処理しましたnormal loaderこのファイルは行内を譲るだけです.!!処理

let a = require('inline-loader!./a') // !  ，inline-loader    loader
let a = require('-!inline-loader!./a') // -!            pre+normal loader   
let a = require('!inline-loader!./a') // !       normal loader   
let a = require('!!inline-loader!./a') // !!         loader

コマンドラインの書き方:

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

エラーメッセージ
エラー:loaderこれはとてもばつが悪いです.私が建設したプロジェクトはついでにnpm ERR! also called "webpack". Did you name your project the samenpm ERR!というフォルダを作成しました.webpackを実行しました.(標準オプションで初期化します.)npm init -yファイルを得ました.
その後、package.jsonを実行し続けることができる.

非同期UI runOnUiThreadはFutterの中で何に相当しますか?