Webpackノート

6893 ワード

Webpackノート
深入浅出Webpack.呉浩麟
webpack公式サイト
インストール

npm i -D webpack

概念

entry:入り口

out put:出力

loader:JavaScriptファイルではない変換器を処理し、任意の種類のファイル/モジュール

を導入する.

plugins:プラグイン、例えば、最適化と圧縮ができます.

mode:モード、設定mode: developmentまたはmode: production

思想
設定
ファイルwebpack.co.nfig.js

module.exports = {
    //       
    entry: './main.js',
    //       
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
    },
    //          
    module: {
        rules: {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'], // loader
        }
    },
    //            
    resolve: {},
    //        
    plugins: [],
    // DevServer    ，    DevServer    Webpack  ，       	
    devServer: {},
    
    //     
    
    //              
    target: 'web', // web | node | ...
    //        Source Map
    devtool: 'source-map',
    //       
    watch: true, //    DevServer  ，        
    //       
    watchOptions: {},
    // 
}

Entry
入り口

// string | Array | Object
entry: './app/entry' // string
entry: ['./app/entry1', './app/entry2'] // array
//        Chunk，  main
entry: {a: './app/entry-a', b: './app/entry-b'} // object
// object    Chunk，       

//     
//          ，          entry，              
//     
entry: () => {
    return {
        a: './pages/a',
        b: './pages/b',
    }
};
//     
entry: ()=> new Promise((resolve)=>{
    resolve({
        a: './pages/a',
        b: './pages/b',
    });
});

Output

output.filename出力ファイルの名前stringは、複数のchuckがあれば、テンプレートと変数

output.filename = '[name]_[hash].js' // '[hash:8].js' // hash   20

を使用する.

output.path出力ファイルをローカルに保存するディレクトリは、絶対パス

output.path = path.resolve(__dirname, 'dist')

である必要があります.
Module
処理モジュールの設定ルール
modules.rules
設定モジュールの読み込みと解析ルールAray

条件マッチング:test、include、exclude

アプリケーション規則:選択されたファイルに対してLoader

を使用する.

modules.rules = [
    {
        test: /\.scss$/, //            
        use: ['style-loader','css-loader','sass-loader'], //          Loader
        //   Loader  rules[].loader = 'xx-loader'
        //  loader  ：1.'xx-loader?params' 2.    
        exclude: path.resolve(__dirname, 'node_modules'), //   node_modules      
        // test、exclude、include    ：String|Reg|[Reg]|String
    }
]

modules.noParse
モジュール化されていない部分のファイルの再帰的解析と処理を無視します.

// RegExp|[RegExp]|function
noParse: /jquery|chartjs/ //      
noParse: (content)=>{
    // content            
    //    true   false
    return /jquery|chartjs/.test(contest);
}

Resolive
モジュール対応ファイルのルールを探しています.

{
//                    
resolve.alias: {
    components: './src/components',
        //   import Btn from 'components/button'    
        // import Btn from './src/components/button'
    'react$': '/path/to/react.min.js',
        //       ，  import 'react'     import '/path/to/react.min.js'
},
//         ，         ， Webpack    xx、xx.js、xx.json
resolve.extentsions: ['.js', '.json'],

//              
resolve.enforceExtension: true,
// node_modules           ，        ，  false
resolve.enforceModuleExtension: false,
}

DevServer
私たちの必要:

httpサービスを提供します.

.ファイルの変更を待ち受ける自動更新

.
インストール

npm i -D webpack-dev-server

実行

webpack-dev-server

設定

//   
devServer.proxy
//        
devServer.hot: true ,
//            ，      
devServer.inline: true,
//              index.html，     html  ，             
devServer.historyApiFallback: true,
//          
devServer.contentBase: path.join(__dirname, 'public') | false /*        */ ,
//          
devServer.headers: {'X-foo': 'bar'},
//       ，   127.0.0.1       
devServer.host: '0.0.0.0', //         
// 
devServer.allowedHosts: []
// 
devServer.disabeHostCheck 
//   https  
devServer.https: true | object
// 
devServer.clientLogLevel
//     Gzip  
devServer.compress: true | false,
//       
devServer.open

実戦
ES 6対応
Babelを使ってES 6をES 5文法に変換します.
.babelrc
babelのプロファイル

{
    "plugins":[], // babel      
    "presets":[], // babel      
}

使用
インストール

npm i -D babel-loader
#

webpack配置

resolve.extensions = ['.ts', '.js']
module.rules = [{
    test: /\.js$/,
    user: ['babel-loader'],
}]

Type Script対応
tsconfig.json
typescriptのプロファイル
使用
インストール

npm i -D typescript awesome-typescript-loader

webpack配置

// webpack.config.js
module.rules=[{
    test:/\.ts$/,
    loader: 'awesome-typescript-loader',
}]

SCSS、Lessをサポートします
インストール

# SCSS
npm i -D sass-loader css-loader style-loader
npm i -D node-sass
# Less
npm i -D less
npm i -D style-loader css-loader less-loader

webpack配置

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

React対応
1.ReactとBabel

インストール

npm i -D react react-dom
npm i -D babel-preset-react

babelの構成、

{
    "preset": [
        "react"    
    ]
}

を増加します.
2.ReactとType Script

インストール

npm i -D react react-dom @types/react @types/react-dom

構成tsconfig.json

//   
{
    "conpilerOptions": {
        "jsx": "react"
    }
}

配置Webpack

module.rules = [{
    test: /\.tsx$/,
    loader: 'awesome-typescript-loader',
}]

Vue対応
1.Vueとbabel
インストール

npm i -S vue
npm i -D vue-loader css-loader vue-template-compiler

webpack配置

module.rules = [{
    test: /\.vue$/,
    loader: 'vue-loader',
}]

2.VueとType Script
インストール

npm i -D ts-loader typescript

tsconfig.json配置

{
    "compilerOptions": {
        "target": "es5",
        "strict": true,
        "module": "es2015",
        "moduleResolution": "node"
    }
}

Loader
ファイル変換機能があります.ファイルをモジュールと見なす

JavaScript関数入力成績