webpack.config
webpackの設定ファイル
/icons/javascript.iconもしくは/icons/typescript.iconで記述される
/icons/typescript.iconで書くときは↓を参照
webpack.configをTypeScriptで書く - Qiita
最新versionは5
古いversionの解説記事があるので注意
最新版で学ぶwebpack 4入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
かなり最新の記事
webpack 4 の入門メモ - Qiita
多分こう書く
code:webpack.config.ts
import * as webpack from "webpack";
import CopyWebpackPlugin from 'copy-webpack-plugin' // ファイルをコピーするplugin
// *.tsをts-loaderでトランスパイルする
const rules: webpack.NewUseRule[] = [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: '/node_modules/'
}
]
const module: webpack.NewModule = {
rules: rules
};
export const config: webpack.Configuration = {
entry: {
${__dirname}/src/content_scripts.ts
},
output: {
//path: path.join(__dirname, 'dist'),
// 省略すると${__dirname}/distに出力される
filename: 'name.js'
},
module,
// import文で末尾の.tsを省略して書けるようにする
resolve: {
extensions: 'ts', 'js'
},
plugins: [
new CopyWebpackPlugin([
{ from: 'public', to: '.' }
])
]
};
export default config
package.json
一部抜粋
code:package.json
"scripts": {
"build": "webpack",
"watch": "webpack -w"
},
tsconfig.json
code:tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"target": "ESNext",
"module": "ESNext",
"strict": true
}
}
References
最新版TypeScript+webpack 4の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA
/kadoyau/Webpackのコンフィギュレーション
#typescript
#2021-03-13 11:04:32
#2020-08-29 03:19:07