Webpackでのローダ使用

実際の開発過程において、webpackのデフォルトはパッケージ処理のみである.js接尾辞名の最後のモジュール.その他js接尾辞名の最後のモジュールは、webpackのデフォルトでは処理できません.loaderローダを呼び出す必要があります.そうしないと、エラーが発生します.1.パッケージ処理cssファイル(1)npm i style-loader css-loader -Dコマンドを実行し、cssファイルを処理するloaderをインストールする.(2)webpack.config.jsプロファイルの追加loaderルールは次のとおりです.

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

注意:use配列で指定されたloader順序は固定されています.複数のloaderの呼び出し順序は、後から前へ呼び出されます.2、パッケージ処理lessファイル(1)npm i less-loader less -Dコマンドを実行し、lessファイルを処理するloaderをインストールします.(2)webpack.config.jsプロファイルの追加loaderルールは次のとおりです.

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

3、パッケージ処理scssファイル(1)npm i sass-loader node-sass -Dコマンドを実行し、scssファイルを処理するloaderをインストールする.(2)webpack.config.jsプロファイルの追加loaderルールは次のとおりです.

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

4、postcssを構成してcssの互換接頭辞を自動的に追加する(1)npm i postcss-loader autoprefixer -Dコマンドを実行する.(2)プロジェクトルートディレクトリの下にpostcssプロファイルpostcssを作成する.config.jsは、次の構成を初期化します.

//           
const autoprefixer = require('autoprefixer');
module.exports = {
    plugins: [autoprefixer] //    
}

(3)webpack.config.jsのrules配列では、cssのloaderルールを次のように変更します.

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

5、パッケージスタイルシートの画像とフォントファイル(1)npm i url-loader file-loader -Dコマンドを実行します.(2)webpack.config.jsのrules配列では、loaderルールを次のように追加します.

module: {
        rules: [
            {test:/\.jpg|png|gif|webp$/,use:'url-loader?limit=56000'}
            //“？”    loader    ，limit         ，     （byte），    limit     ，     base64   。
        ]
    }

6、パッケージ処理jsファイルの高度な構文(1)babel変換器関連のパッケージをインストールする:npm i babel-loader @babel/core @babel/runtime -D.(2)babel構文プラグイン関連パッケージのインストール:npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D.(3)プロジェクトルートディレクトリの下にbabelのプロファイルbabelを作成する.config.jsと初期化の基本構成は以下の通りです.

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

(4)webpack.config.jsのrules配列では、loaderルールを次のように追加します.

module: {
        rules: [
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
            //exclude    ，  babel-loader     node_modules  js  。
        ]
    }

7、webpack構成vueコンポーネントのローダ(1)npm i vue-loader vue-template-compiler -Dコマンドを実行します.(2)webpack.config.jsプロファイルでvue-loaderを追加する構成は次のとおりです.

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    plugins: [htmlPlugin,new VueLoaderPlugin()],
    module: {
        rules: [
            {test:/\.vue$/,loader:'vue-loader'}
        ]
    }
}

8、webpackプロジェクトでvue(1)を使用してnpm i vue -Sを実行し、vueをインストールする.(2)srcでのindex.jsエントリファイルには、import Vue from 'vue'によってvueコンストラクション関数がインポートされます.(3)vueのインスタンスオブジェクトを作成し、制御するel領域を指定します.(4)render関数でAppルートコンポーネントをレンダリングする.

//1.  vue    
import Vue from 'vue';
//2.       
import App from './components/App.vue';
const vm = new Vue({
//3.  vm          
    el: '#app',
    //4.  render  ，         el   
    render: h => h(App)
})

9、webpackパッケージはpackageで配布する.jsonファイルには、プロジェクトルートディレクトリのwebpackをデフォルトでロードするwebpackパッケージコマンドが構成されている.config.jsプロファイル.

"scripts": {
    "built": "webpack -p"
  }

10.上記のプロファイルについては、(1)webpack.config.jsファイルは次のとおりです.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html'
})
module.exports = {
    //    
    mode: 'development', //development/production
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        path: path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    plugins: [htmlPlugin,new VueLoaderPlugin()],
    module: {
        rules: [
            {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.jpg|png|gif|webp$/,use:'url-loader?limit=56000'},
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            {test:/\.vue$/,loader:'vue-loader'}
        ]
    }
}

(2)postcss.config.jsファイルは次のとおりです.

const autoprefixer = require('autoprefixer');
module.exports = {
    plugins: [autoprefixer]
}

(3)babel.config.jsファイルは次のとおりです.

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

(4)上記の依存パッケージについては以下の通りである.

"devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/runtime": "^7.9.2",
    "autoprefixer": "^9.7.6",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "node-sass": "^4.13.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.4",
    "url-loader": "^4.1.0",
    "vue-loader": "^15.9.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }