webpack4 + typescript 配置筆記

M1racleHao發表於2018-10-15
WebTypeScript筆記

最新需要寫一些 js 的東西，正好就想試用一下 typescript 試用以後感覺舒服，那麼需求來了，我們需要編譯出來的檔案，在外部可以呼叫，所以就有了下面的筆記

參考文章www.cnblogs.com/mahidol/p/8…

npm 安裝依賴

npm install --save-dev typescript ts-loader webpack webpack-cli
複製程式碼

在專案根目錄建立兩個資料夾 src 和 dist 以及一個測試用的入口檔案 index.html

src 用來存放我們的原始碼 dist 用來儲存生成後的原始碼

index.html 的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script type="text/javascript" src="./dist/app.js" ></script>
</html>
複製程式碼

入口檔案僅僅是用來測試的，所以僅僅引入了輸出的js 我們在 chrome 控制檯測試

根目錄建立 typescript 配置檔案 tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}
複製程式碼

建立 webpack 配置檔案，採用www.webpackjs.com/guides/prod… 中的方案，只不過有些小修改

安裝 webpack-merge 包

npm install --save-dev webpack-merge
複製程式碼

webpack.common.js 公用的配置檔案

const path = require('path');

module.exports = {


    entry: './src/index.ts',
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist')
    },

    module: {
        rules: [{
            test: /\.ts$/,
            use: "ts-loader"
        }]
    },
    resolve: {
        extensions: [
            '.ts'
        ]
    }
};
複製程式碼

webpack.dev.js 開發中的配置檔案

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
    module.exports = merge(common, {
        mode: 'development',
});

複製程式碼

webpack.prod.js 輸出的的配置檔案

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
    mode: 'production',
    output: {
        filename: 'app.min.js',
        path: path.resolve(__dirname, 'dist')
    },
});

複製程式碼

在 package.json 中增加兩條命令

"start": "webpack --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
複製程式碼

這裡跟文件不一樣，畢竟文件的開發部分配置檔案用的測試伺服器，我們這個單純的就是自己測試，所以依然還是用 webpack 命令編譯一下。

至此，我們在普通場景下已經可以使用了。但是由於我們的需求是，這個檔案不僅僅在 html 中呼叫，還需要在外部呼叫編譯出來的程式碼，但是上面的程式碼是在外面無法呼叫的，所以我們繼續搞。

在 webpack.common 配置檔案中的 output 屬性增加兩個配置

library: "MediaParser",
libraryTarget: 'var',
複製程式碼

簡單點說就是匯出為名稱為 MediaParser 的變數，這樣我們就可以在外部 scrpit 中呼叫了

具體的這兩個引數可以看 webpack 中的文件www.webpackjs.com/configurati… www.webpackjs.com/guides/auth…

收工

相關文章