9 css分離:extract-text-webpack-plugin

6214 ワード

webpack

css分離:extract-text-webpack-plugin

このプラグインをインストールします.
for webpack 1
npm install –save-dev [email protected]
for webpack 2
npm install –save-dev [email protected]
for webpack 3
npm install –save-dev extract-text-webpack-plugin
for webpack 4
npm i extract-text-webpack-plugin@next -D

webpack-config.jsにプラグインconst extractTextPlugin=require(「extract-text-webpack-plugin」)を導入する.

配置plugins:ここでnewをこのオブジェクトとして、new extractTextPlugin("/css/index,.css")

を上の配置プラグインとカンマで区切る

ここの/css/index.cssは分離後の経路位置である.この構成が完了したら、パッケージコード:元のstyle-loaderとcss-loaderも変更します.

[x]修正コードは以下の通りである:

module:{
        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },

webpackでパッケージング

注意:cssファイルを分離しましたが、cssパスは

ではありません.

=publishPath==で解決

publicPath:webpackです.config.jsファイルのoutputオプションでは、静的ファイルパスを処理する

が主な役割を果たす.

処理前にwebpackが必要である.config.js上にwebsiteオブジェクト

を宣言

var website={
    publicPath:"http://192.168.1.108:1717"
}

注意:ここのIPとポートは本機のipあるいはあなたのdevServerが配置したIPとポート/==publicPathの中の内容は必ず正しく書きます:ipconfigでコンピュータのipアドレスを見て、それからコロンの後ろで自分で設定したポート==

outputオプションでこのオブジェクトを参照するpublicPathプロパティ

//        
output:{
    //     ，  Node  
    path:path.resolve(__dirname,'dist'),
    //       
    filename:'[name].js',
    publicPath:website.publicPath
},

webpackでパッケージ化すると、元の相対パスが絶対パス(絶対パス速度が速くなる)になりますgitub公式サイトwebpack 4バージョン以上css分離

*次のエラーが発生した場合は、ipが正しく書かれていないことを示します。

> y@1.0.0 server F:\webLearn\webpackLearn
> webpack-dev-server

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRNOTAVAIL 10.212.109.18:8087
    at Object._errnoException (util.js:992:11)
    at _exceptionWithHostPort (util.js:1014:20)
    at Server.setupListenHandle [as _listen2] (net.js:1338:19)
    at listenInCluster (net.js:1396:12)
    at doListen (net.js:1505:7)
    at _combinedTickCallback (internal/process/next_tick.js:141:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! y@1.0.0 server: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the y@1.0.0 server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\   \AppData\Roaming
pm-cache\_logs\2018-07-11T07_46_12_914Z-debug.log
PS F:\webLearn\webpackLearn>

正しいipアドレスを修正すれば実行に成功します、ははは

REFLECTION ON A METHOD WITH AN OUT PARAMETER

モバイル側のビデオ互換性を知っておく必要がある点