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

环境

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$/

问题：

1. 实时监听代码，当监听到代码变化就重新打包；

2. 缺少前端的服务(现有 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)$/
    }
}

1. 本地开发环境

$ cnpm install -D webpack-dev-server

2. 热更新、自动打开浏览器

devServer:{
    contentBase: "/dist",
    open: true
}

3. package.json

"scripts":{
    "start" : "webpack-dev-server"
}

4. 启动

$ npm start

plugins：[
    new HtmlWebpackPlugin({
        template: "./src/index.html"
    }),
    new CleanWebpackPlugin()
]

object-fit：cover 可以视频拉伸

css-loader 中 options:{modules: true} 可以模块化 css，防止 css 变量污染

解析顺序从右往左，从下到上：

{
    test:/\.css$/,
    use:['style-loader','css-loader']
}

不压缩打包后的代码，webpack配置文件：

mode:"development"

use 配置中 先执行后边的 在执行前边的

css在ts中使用d.ts声明文件写法(同目录)：

declare const styles: {

    readonly "popup": string;

    readonly "popuTitle": string;

}

export default styles;

TS 大型项目

后期维护成本大于开发成本

webpack的loader是从右向左执行的，解析css文件时，先执行css-loader再执行style-loader。

loader顺序不能颠倒，只有通过css-loader处理css后才能通过style-loader生成<style></style>标签。

• css-loader：加载.css文件

• style-loader：使用<style>将css-loader内部样式注入到我们的HTML页面