02-webpackの使用

Webpackの使用
Webpackの紹介

Webpackは、現在最も人気のあるフロントエンドリソースのモジュール化管理とパッケージングツールです.多くのばらばらなモジュールを依存とルールに従って、本番環境の導入に適したフロントエンドリソースにパッケージ化できます.また、必要に応じてロードされたモジュールをコードで区切って、実際に必要に応じて非同期でロードすることもできます.loaderの変換により、CommonJsモジュール、AMDモジュール、CMDモジュール、ES 6モジュール、CSS、ピクチャ、JSON、Coffeescript、LESSなど、任意の形式のリソースをモジュールと見なすことができる.

Webpackインストールnpm install webpack -g
Webpackの使用

基本プレゼンテーション

webpack main.js build.js

         main.js          build.js 。
       build.js

プロファイル

    webpack.config.js  webpack       
            webpack              

    //
    module.exports = {
     entry: './main.js',  //   js  
     output: {
         path: './bin',   //       
         filename: 'build.js'   //   
     }
 };

Webpackでよく使われるLoader
Webpackのデフォルトはjsファイルのみをパッケージ化できます
cssファイルのパッケージ化

初期化項目

cnpm init

style-loaderとcss-loader

をダウンロードcnpm install css-loader style-loader --save-dev

プロファイル

module.exports = {
     entry: './main.js',
     output: {
         //path: './bin',    //           
         filename: 'build.js'
     },
     module: {
         loaders: [{
             test: /\.css$/,
             exclude: /node_modules/,           //      
             loader: 'style-loader!css-loader'  //        
         }]
     }
 };

実行パッケージングwebpack

Autoprefixer-loader自動css接頭辞追加

ダウンロードcnpm install autoprefixer-loader --save-dev

プロファイル

 loader: 'style-loader!css-loader!autoprefixer-loader'

デモ

プライベートプレフィックスa{transition:transform 1 s;}を追加

期限切れの接頭辞-webkit-border-radius:5 pxを除去する.border-radius: 5px;

パッケージless

cnpm install less-loader less--save-dev

をダウンロード

プロファイル

 loader: 'style-loader!css-loader!autoprefixer-loader!less-loader'

プレゼンテーション(.lessファイル)

@color: yellow;

body {
    background-color: @color;
}

パッケージsass

ダウンロードcnpm install sass-loader node-sass --save-dev

プロファイル

 loader: 'style-loader!css-loader!autoprefixer-loader!less-loader'

プレゼンテーション(.scss)

$color: red;

body {
    background-color: $color;
}

url-loader

ダウンロードcnpm install url-loader --save-dev

依存file-loader cnpm install file-loader --save-dev

プロファイル

      80k   ，     base64  ，    http  

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

処理アイコンフォント

{
    test: /\.(png|jpg|eot|svg|ttf|woff|otf)/,
    loader: 'url-loader?limit=80000' //    'url?limit=20000'       
}

パスの設定

dist
src
 |__  statics
 |__   css
 |__  images
 |__   font

!注意参照のパス(スタイルで参照する画像のパスに問題がある)はindexを実行します.htmlとパッケージ化されたファイルのパスが一致しない実行パスが間違っています.
リアルタイムのパッケージングとブラウザのリアルタイムリフレッシュ

ダウンロードインストールwebpack-dev-serverとhtml-webpack-plugin cnpm install webpack-dev-server --save-dev cnpm install webpack-dev-server -g

npm run dev方式で実行する場合は、webpack npm install webpack--save-devをローカルにインストールする必要があります

運転

webpack-dev-server --inline --hot --open --port 3000

構成

packageでjsonでの構成

    "scripts": {
        "dev": "webpack-dev-server --inline --hot --open --port 3000"
     }

パラメータ

inline自動リフレッシュhotホットロードopen自動デフォルトブラウザでport指定ポートを開く

運転

npm run dev
distでパッケージ化されたコンテンツを削除して参照を実行する画像とアイコンのフォントが見えないので、次のセクションを参照してください.
メモリにindexを生成する.htmlは、コンパイルされたファイル(app.jsで参照されているファイル)を自動的にパッケージ化します.

html-webpack-plugin

をダウンロードcnpm install html-webpack-plugin --save-dev

webpackを構成する.config.js

    var htmlWebpackPlugin = require('html-webpack-plugin');

    plugins: [
        new htmlWebpackPlugin({
            title: '    ',  //      
            filename: 'index.html',
            template: 'index1.html'
        })
     ]

ES 6回転ES 5
webpack2.0デフォルトでes 6をサポートするモジュール化構文import/export

ダウンロード

cnpm install babel-core babel-loader babel-preset-es2015 --save-dev//包装は転換できる.vueファイルのes 6構文cnpm install babel-plugin-transform-runtime --save-dev

webpackを構成する.config.js

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


    //          
    let webpack = require('webpack');
    plugins: [
        new htmlWebpackPlugin({
            title: '    ',  //      
            filename: 'index.html',  //            
            template: 'index1.html'  //           --    
        }),
        new webpack.LoaderOptionsPlugin({
         options: {
           babel: {
                  presets: ['es2015'],
                  plugins: ['transform-runtime']   //    .vue  es6   
            }
         }
       })
     ]

よく使われるES 6構文

外部ファイルをインポート、cssファイル

をインポート

import './statics/css/style.scss';
import './statics/css/font-awesome.css';

jsモジュールをインポートし、オブジェクト

を受け入れます.

import obj from './add.js';

モジュールのエクスポートオブジェクト

//ES6         
export default {
    add: add, 
    sub: sub
}

//  
export default {
    add, sub
}

//      
export default {
    add(a, b) {
        return (a - 0) + (b - 0);
    },
    sub(a, b) {
        return (a - 0) + (b - 0);
    }
}

//ES6        
import obj from './math.js';


//commonjs    
module.exports = {
    add: add,
    sub: sub
}
//  ，            
module.exports = {
    add, sub
}

モジュールにおける導出方法

//ES6    
export function add() {}
export function sub() {}

//ES6     
import {add} from './math.js'


//commonjs    
module.exports = {
    add: function(x, y) {
        return x + y;
    }
}

//      
module.exports = {
    add(x, y) {
        return x + y;
    }
}