配置
webpack
npm i init --y
npm i webpack -D
npm i webpack-cli -D
npm i @types/firefox-webext-browser @types/chrome -D // 瀏覽器擴展API提示
支持 Typescript
tsc --init
npm i typescript ts-loader -D
設定tsconfig.json組態檔
{
"compilerOptions": {
"target": "ES2016",
"module": "commonjs", // ts-node 不支持 commonjs 以外的任何模塊語法
"allowJs": true,
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"moduleResolution": "node"
},
"exclude": ["node_modules"],
"include": ["./src/**/*.ts"]
}
讓組態檔支持typescript
npm i ts-node @types/node @types/webpack -D
創建webpack.config.ts組態檔
import path from "path";
import webpack from "webpack";
const config: webpack.Configuration = {
mode: "production",
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
};
export default config;
配置package.json
{
"scripts": {
"build": "webpack --config webpack.config.ts"
}
}
測驗對 typescript 支持
創建檔案./src/index.ts
const test = <T>(value: T) => {
return value;
};
const d = test(12);
console.log(d);
在端執行 npm run build, 如果dist目錄下生成了.bundle.js檔案則成功
支持 vue
npm i vue
npm i vue-loader -D
npm i vue-template-compiler -D
tsconfig.json檔案調整
{
"exclude": ["node_modules", "dist"],
"include": ["./src/**/*.ts", "./src/**/*.vue", "./src/**/*.js"]
}
webpack.config.ts檔案調整
const VueLoaderPlugin = require("vue-loader/lib/plugin");
{
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.tsx?$/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/],
},
exclude: /node_modules/,
},
],
},
plugins: [new VueLoaderPlugin()],
}
類寫法需要安裝
npm i vue-class-component -D
npm i vue-property-decorator -D
typescript只能決議ts檔案，無法決議vue檔案，所以要做一個模塊宣告
宣告檔案shims-vue.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
支持 sass
npm i sass-loader node-sass -D
npm i style-loader css-loader sass-loader -D
webpack.config.ts 組態檔調整
module: {
rules: [
...
// 普通的 `.scss` 檔案和 `*.vue` 檔案中的
// `<style lang="scss">` 塊都應用它
{
test: /\.scss$/,
use: ["style-loader","css-loader", "sass-loader"],
},
],
},
專案地址
https://gitee.com/whnba/dev-browser-plug-config.git
其他專案
ip定位查詢瀏覽器插件
老虎優惠券瀏覽器插件
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/248481.html
標籤：其他
上一篇：hooks 與 animejs
下一篇：哪位大神能幫我架構設計提點建議！