Webpackまとめ2-プロファイルパッケージタイプ

Webpackまとめ2--プロファイルタイプ--babel

webpackパッケージcssファイル

webpackパッケージlessファイル

webpackパッケージsassファイル

webpack処理ピクチャパス

webpack処理フォントファイル

babel処理高度JS構文

webpack.config.jsテンプレート

拡張

注1:全文の中でプラグインをインストールしてcnpmのために书いて、个人は比较的にyarnを推荐してインストールして、cnpmとyarnの区别、前に転载するブログのnpmとyarnの区别を见ることができます
注2:webpackのバージョン間の互換性に注意する.
Webpackパッケージcssファイル

cnpm i style-loader css-loader--save-dev

を実行

webpackに追加する.config.jsプロファイル:

module: { //        loader   
        rules: [ //        
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//  css     
        ]
    }

注意:useはtestが一致するファイルを処理するためにどのモジュールを使用するかを示す.useにおける関連loaderモジュールの呼び出し順序は、後から前へ呼び出される.

Webpackパッケージlessファイル

cnpm i less-loader less-D

を実行

webpackを修正する.config.jsこのプロファイル:

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

Webpackパッケージsassファイル

cnpm i sass-loader node-sass--save-dev

を実行

webpack.config.jsにsassファイルを処理するloaderモジュールを追加:

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

Webpack処理ピクチャパス

cnpm i url-loader file-loader --save-dev

webpack.config.jsにurlパスを処理するloaderモジュールを追加する:

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

はlimitによってbase 64符号化を行うピクチャサイズを指定することができる.base 64符号化は、指定バイト未満のピクチャのみが行う:

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

Webpackフォントファイルの処理

webpack.config.jsにurlパスを処理するloaderモジュールを追加する:

{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }

Babel処理高級JS構文

運転cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev babelインストール関連loaderパッケージ

説明:babel-core:babelのapiを呼び出すことができ、jsコードをast(抽象文法ツリー)に分析することができ、各プラグインが文法を分析して相応の処理を行うのに便利である.babel-loader:importまたはモジュールのロード時にes 6コードを前処理し、es 6構文をes 5構文に変換する.
babel-loader:importまたはモジュールのロード時にes 6コードを前処理し、es 6構文をes 5構文に変換します.babel-polyfill:完全なES 2015+環境に倣い、Promiseなどの新しい組み込みオブジェクト、Arrayなどの静的メソッドを使用することができます.义齿assign、例えばArray.prototype.includesとジェネレータ関数(regeneratorプラグインを使用するために提供されます).これを達成するために、polyfillはStringのようなオリジナルタイプのグローバルレンジに追加されました.babel-runtime babel-plugin-transform-runtime:babel-polyfillと同様に、使用シーンが異なります.

実行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev babel変換をインストールする構文

webpack.config.jsに関連するloaderモジュールを追加:

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

node_をmodulesフォルダを除外項目に追加:プロジェクトルートディレクトリに.gitignoreファイルを新規作成し、追加:

node_modules
.idea
.vscode
.git

は、プロジェクトのルートディレクトリに追加する.babelrcファイルを変更し、このプロファイルを次のように変更します:

{
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}

webpack.config.jsテンプレート

//      ，      js  ，  node      ，           
const path = require('path');

//        HTML      
//     ，      plugins    
// htmlWebpackPlugin        ：
//  1.                     
//  2.        bundle.js      
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),//      ，            ，         
            filename: 'index.html' //          
        })
    ],
    module: { //  ，              
        rules: [ //            
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //     .css      loader  
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //     .less      loader  
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //    scss     loader
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, //            loader  
            //limit     ，      ，      byte，        ，         limit ，     base64      
            //   ，     base64      
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, //      
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //  babel       js   
            { test: /\.vue$/, use: 'vue-loader' } //    .vue     loader
        ]

    }
};

拡張
2つのラーニングリンクを添付します.
Babel-preset-env:必要な唯一のBabelプラグイン
Runtime transformランタイムコンパイルes 6