-
webpack.conf.js中的组件模块需要添加
{
test: /\.css$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]',
namedExport: false
}
}
}],
include: [
__dirname + '/src/components'
]
}
查看全部 -
resolve
查看全部 -
环境
查看全部 -
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 已经废弃，改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$/
查看全部 -
问题：
实时监听代码，当监听到代码变化就重新打包；
缺少前端的服务(现有 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里面定义执行webpack.config.js的命令"build": "webpack"即可，默认就会执行根目录下面的webpack.config.js，但如果我们换名字了或者不放在根目录下就可以添加后面部分来自定义执行文件，即
"build": "webpack --config webpack.config.js"
查看全部 -
感谢查看全部
-
min.padStart(2,'0')
补零操作
查看全部 -
嗯嗯嗯查看全部
-
弹层播放器组件
查看全部 -
style-loader 提取到内部样式
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)$/ } }查看全部
举报