2020

Webpack Basic

Webpack

安裝webpack

1
$ npm install webpack --save-dev

新增webpack.config.js

在根資料夾下，新增一個檔案webpack.config.js

在config指定entry及output

在webpack.config.js將entry指定為index.js；output指定為bundle.js

webpack.config.js

1
2
3
4
5
6
7
8
9
10
const path = require('path');

module.exports = {
    entry: './src/js/index.js', 
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: 'bundle.js'
    },
    mode: 'development'
};

./代表現在的資料夾

../代表上一層資料夾

建立指令dev(在package.json)

在 package.json 新增指令 "dev": "webpack"

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "XXXX",
  "version": "1.0.0",
  "description": "XXXX project",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development" 
  },
  "author": "SJChen",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.5"
  },
  "dependencies": {}
}

執行指令dev以生成bundle.js

執行指令dev產生bundle.js

1
$ npm run dev

將index.html連結至bundle.js

index.html

1
2
3
<body>
    <script src="js/bundle.js"></script>
</body>

Webpack-cli

安裝webpack-cli

1
$ npm install webpack-cli --save-dev

建立指令build

package.json

1
2
3
4
"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
},

執行指令build

1
$ npm run build

Webpack-dev-server

安裝webpack-dev-server

1
$ npm install webpack-dev-server --save-dev

在config建立devServer

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
const path = require('path');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './dist'
    }
};

建立start指令

package.json

1
2
3
4
5
"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },

執行start以運行devServer

1
$ npm run start

HTML-Webpack-plugin

安裝html-webpack-plugin

1
$ npm install html-webpack-plugin --save-dev

在config建立plugins

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ]
};

執行start以生成index.html

1
$ npm run start

接下來應該是看到src/index.html的內容被輸入至index.html。

註: 若是出錯可參考以下解法: 修改webpack.config.js裡的__dirname為'dist'，並將filename修改為'js/bundle.js'之後，再跑一次npm run start，就成功了。這是因為path要指向到dist裡的index.html，而非dist/js裡(這裡面沒有index.html)。

執行dev以同時生成html及js

1
$ npm run dev

在dist下出現index.html和/js/bundle.js

Babel

安裝Babel相關套件

我們需要安裝三個套件:

  • babel-core
  • babel-preset-env
  • babel-loader
1
$ npm install babel-core babel-preset-env babel-loader --save-dev

在config建立module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
};

新增.babelrc

在根目錄下建立.babelrc

1
2
3
4
5
6
7
8
9
10
11
12
{
    "presets": [
        ["env", {
            "targets": {
                "browsers": [
                    "last 5 versions",
                    "ie >= 8"
                ]
            }
        }]
    ]
}

安裝Babel-polyfill

1
$ npm install babel-polyfill --save-dev

在config指定entry

1
2
3
4
5
6
7
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: ['babel-polyfill', './src/js/index.js'],
    output: {
        //下略

回顧

資料夾結構

  • dist <–發佈版的資料夾
    • css
      • style.css
    • img
    • js
      • bundle.js <–輸出為ES5的js
    • index.html <–輸出結果
  • node_modules
  • src <–開發版的資料夾
    • js <–採用MVC結構
      • models
      • views
      • config.js <–一些不變的參數,例如API
      • index.js <–匯入models及views的controller
    • index.html
  • .babelrc
  • package-lock.json
  • package.json
  • webpack.config.js

.babelrc

1
2
3
4
5
6
7
8
9
10
11
12
{
    "presets": [
        ["env", {
            "targets": {
                "browsers": [
                    "last 5 versions",
                    "ie >= 8"
                ]
            }
        }]
    ]
}

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: ['babel-polyfill', './src/js/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
};

閱讀全文