-
resolve
查看全部 -
環(huán)境
查看全部 -
1. 安裝ts-loader
cnpm i -D ts-loader typescript
2. 修改webpack.config.js
rules:{
? test:/\.ts$/,
? use:['ts-loader'],?
? exclude:/node-module/ //排除node_module目錄 }
3. 新增tsconfig.json
{ "compilerOptions":{ "module":"ES6", "target":"ES5" } }
4. 引用省略后綴名
resolve:{ "extensions":['.ts','.js','.json'] }查看全部 -
devServer: {
? ? ? ? // contentBase: "/dist", // webpack5 已經(jīng)廢棄，改static
? ? ? ? static: {
? ? ? ? ? ? directory: path.join(__dirname, "dist")
? ? ? ? },
? ? ? ? open: true
? ? },
查看全部 -
有幾個容易出錯的地方，記錄一下
1、path引入是const path = require('path) 如果需要使用import path from 'path' 需要使用webpack插件
2、node 導出接口是使用 module.exports 而不是 export default
3、引入loader的test 不需要加引號 /\.css$/
查看全部 -
問題：
實時監(jiān)聽代碼，當監(jiān)聽到代碼變化就重新打包；
缺少前端的服務(現(xiàn)有 index.html 是通過本地打開的方式啟動)；
解決方案：安裝及配置webpack-dev-server
安裝命令：
npm?i?-D?webpack-dev-server
在 webpack.config.js 中配置：
module.export?=?{ ????... ????devServer:?{ ????????contentBase:?"/dist, ????????open:?true ????}, ????... }重新在 package.json 中配置腳本
"scripts":{ ????... ????"start":?"webpack-dev-server" }運行命令
npm?start
查看全部 -
npm init -y：-y就是yes的意思，在init的時候直接略過所有問答，全部采用默認答案，生成的默認的package.json
package.json-scripts里面定義執(zhí)行webpack.config.js的命令"build":?"webpack"即可，默認就會執(zhí)行根目錄下面的webpack.config.js，但如果我們換名字了或者不放在根目錄下就可以添加后面部分來自定義執(zhí)行文件，即
"build":?"webpack?--config?webpack.config.js"
查看全部 -
感謝查看全部
-
min.padStart(2,'0')
補零操作
查看全部 -
嗯嗯嗯查看全部
-
彈層播放器組件
查看全部 -
style-loader 提取到內(nèi)部樣式
mini-css-extract-plugin 提取到單獨的 css
查看全部 -
靜音下可以自動播放
查看全部 -
1. 安裝ts-loader
$?cnpm?i?-D?ts-loader?typescript
2. 修改webpack.config.js
rules:{ ????test:/\.ts$/, ????use:['ts-loader'], ????exclude:/node-module/?//排除node_module目錄 }3. 新增tsconfig.json
{ ???"compilerOptions":{ ???????"module":"ES6", ???????"target":"ES5" ???}? }4. 引用省略后綴名
resolve:{ ????"extensions":['.ts','.js','.json'] }查看全部 -
1. 下載依賴
$?cnpm?i?-D?file-loader
2. 修改webpack.config.js
module:{ ????rules?:{ ????????test:?/\.(eot/woff2/woff/ttf/svg)$/ ????} }查看全部
舉報