gitee git链接：https://gitee.com/cangsui/webpack-demo.git
npm init
npm i webpack -D
npm i webpack-cli -D

官网笔记

mode模式

webpack —mode=production

output/entry 出入口

output
- filename
  - 通配符 [name] [hash]
- path
- library:’库名’
  - 库名.入口文件中的方法(传参)
  - type将库暴露的方式：String
    - umd: 在所有模块定义下暴露库，允许它作为与commonJs、AMD和作为全局变量工作
    - var:入口起点的返回值是个变量
    - assign:(慎用) 生成一个隐含的全局变量，有可能重新分配一个现有的值
    - assign-properties(5.16.0+)和assign相似，但是可以重用，更安全
    - this:this的对象取决于开发者
    - window
    - global
    - …
entry
- 单个 string
- 多个对象 { key : string, … }
  - name1
    - imput:’./路由/文件名.js’,
    - library
      - name:库名
      - type:’umd’,
      - umdNamedDefine:true
        devServer
devServer
- open:true —运行后打开默认浏览器浏览
- port:9000 —运行端口
- hot:true —开启热启动 ‘only’：构建失败时不刷新页面
- static:监听静态文件
  - [‘assets’,’css’]
  - directory:path.join(__dirname,’public’)
    loader
module
- rules[]
  - { test:/.css/,use:’css-loader’ }
  - { test:/.css$/,
    - use:[
      - { loader:’style-loader’ },
      - { loader:’css-loader’,options:{ modules:true } } //允许指定多个loader
        plugins
plugins:[ new 插件名() ]
webpack(require(‘./webpack.config.js’)).apply(new 插件名()) —-不推荐conpiler.apoly的使用方式

视频笔记

rules

npx less ./src/css/index.less 转换成css

css兼容

npm i postcss-cli -D
npm i autoprefixer -D
src/.browserslistrc
npx postcss —use autoprefixer -o ret.css ./src/css/index.css
npm i -D postcss-preset-env 这是postcss的集合
在项目中安装：npm i -D postcss-loader

const path = require("path");
module.exports = {
        entry: './src/index.js',
        output:{
                filename:'main.js',
                path:path.resolve(__dirname,'qiu')
        },
        module:{
                // rules:[{
                //         test:/\.css$/,
                //         use:[
                //                 {
                //                         loader:'css-loader'
                //                 }
                //         ]
                // }]
                // rules:[{
                //         test:/\.css$/,
                //         loader:'css-loader'
                // }]
                // rules:[{
                //         test:/\.css$/,
                //         loader:['css-loader']
                // }]
                      rules: [{
                        test: /\.less$/,
                        use: [{
                            loader: "style-loader" // creates style nodes from JS strings
                        }, {
                            loader: "css-loader" // translates CSS into CommonJS
                        }, {
                            loader: "less-loader" // compiles Less to CSS
                        }]
                }]
        }
}

package.json

{
  "name": "demo04",
  "version": "1.0.0",
  "description": "some thing",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config lg.webpack.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.5.1",
    "webpack": "^5.63.0",
    "webpack-cli": "^4.9.1"
  }
}

npm i -D file-loader

img导入方式

.esModule
.default
import
require

options

name
esModule
npm i -D url-loader
会把图片变成base64格式

webpack5本身内置asset模块所以不需要额外安装

npm i -D clean-webpack-plugin 插件

npm i -D html-webpack-plugin

npm i -D @babel/preset-env

转换es语法
npm i -D @babel/cli 为了在控制台测试babel
npm i -D @babel/preset-env

npm i -D babel-loader

{
    test:/\.js$/,
    use:[
        {
            loader:'babel-loader',
            options:{
                presets: ['@babel/preset-env']
            }
        }
    ]
}

babel-loader有四个核心模块

@babel/preset-env
@babel/preset-react
@babel/preset-typescript
@babel/preset-flow

npm i -S @babel/polyfill

polyfill太大了，
按需配置：npm i core-js regenerator-runtime
import “core-js/stable”;
import “regenerator-runtime/runtime”
—save 生产环境也需要
为了弥补babel/preset-env预设无法解析的es新语法，比如async、Promise等

//babel.config.js：
module.exports={
    "presets": [
      [
        "@babel/preset-env",
        {
            useBuiltIns:'usage',
            corejs:3
        }
      ]
    ]
  }
//webpack.config.js
rules: [
    {
        test:/\.js$/,
        enclude:/node_modules/,
        use:[
            'babel-loader'
        ]
    }
]

copy_webpack_plugin

npm i -D copy-webpack-plugin

webpack-dev-server

npm i -S webpack-dev-server

"scripts":{
    "serve":"webpack serve"
}

webpack-dev-middleware

不刷新页面的模块热更新
npm i -S express
npm i -S webpack-dev-middleware
运行命令 node .\配置文件名字.js （反斜杆）

HMR 局部热启动

React 热启动

（未完全操作，所以不确定笔记正确）

npm i -S react
npm i -S react-dom
npm i -D @babel/core
npm i -D @babel/preset-env
npm i -D @babel/reset-react
npm i -D babel-loader
npm i -S @pmmmwh/react-refresh-webpack-plugin
- new 对象
- babel.config.js:plugins插件

//babel.config.js
module.exports={
    presets:[
      ['@babel/preset-env'],
    ['@babel/preset-react']
  ],
  plugins:[
      ['react-refresh/babel']
  ]
}
//webpack.config.js
module.export={
    target:'web',
  module:{
      rules:[
      {}
    ]
  }
}

Vue 热启动

npm i -S vue
npm i -D vue-template-compiler
npm i -D vue-loader@14 ——安装vue-loader14版本
推荐使用14版本比较简单
如果是15版本，要引入插件：require(“vue-loader/lib/plugin”)

//webpack.config.js:
    {
        test:/\.vue$/,
        loader:'vue-loader',
        exclude:/node_modules/
    }
//main.js:
    import Vue from "vue";
    import App from "./App.vue";
    new Vue({
        render: h => h(App)
    }).$mount('#root')
//App.vue:
    <template>
      <div class="example"> {{ msg }} </div>
    </template>
    <script>
    export default {
      data () {
        return { msg: 'Hello world!' }
      }
    }
    </script>

publicPath

output:{
publicPath:’’ //指定本地服务所在的目录默认就是/
}
devServer:{
hot:true,
static:{ //static不会打包
directory: path.join(__dirname, ‘/public’),
publicPath:’/lg’, //服务器上的虚拟路径它跟上面的publicPath一致
}
}

全局变量

js：window (加不加意思一样，通过它们的容器访问它们会更安全)
node:global
web workers:self

路径
import 查到一个没有后缀名的路径名，默认判断它是否是一个文件，如果是文件就导入文件，如果是路径，默认在后面加个index, 去找index 再判断是否是一个文件，以此类推

resolve
```
resolve:{
extensitions:['.js','.vue','.ts','.json'],//添加后引入时，不需要文件名后缀
alias:{
    '@':path.resolve(__dirname,'src')
}
}
```
mode
development
- 默认 devtool 设置为 ‘eval’
production | 默认
none

devtool

控制生成 source map —没实现感觉也没啥用算了

‘source-map’
‘eval’
false

package.json版本

指定版本例如2.2.0
~ 例如1.1.0 表示安装1.1.x的最新版本，但是不安装1.2.x
^ 例如^2.1.4 表示安装2.1.4以上的版本，但是不安装3.0.0，也就是不安装大版本号

总的来说，指定版本分得最细，^分得最粗，都是限定了最高版本

=
>
<
<=
x-range
*-range
version1 - version2
range1 || range2

DefinePlugin

允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。
例如：
plugins:[
new webpack.DefinePlugin({
somekey: ‘somevalue’, …
})
]

ts-loader

两种编译方式：ts-loader 和 babel/preset-typescript
各自缺点：

babel-loader在编译阶段无法暴露ts的一些语法错误
ts-loader 无法做polyfill填充，无法兼容es新语法

一些解决方法：
package.json 短命令：

scripts:{
  "ck":"tsc --noEmit",  // noEmit:不生成临时js文件
  "build":"npm run ck && webpack"
}

=》》》》》》》》》》》》》》》第一种：
npm i -D ts-loader
npm i -D typescript
tsconfig.json
=》》》》》》》》》》》》》》》第二种：
babel-loader 需要安装 typescript模块
babel.config.js：

module.exports={
    "presets": [
      [
        "@babel/preset-env", //默认配置 不需要指定箭头函数  之类的
        {
            useBuiltIns:'entry', //js 版本兼容  指定corejs版本3  默认false  usage  entry
            corejs:3
        }
      ],
      ["@babel/preset-typescript"]
    ]
  }

加载vue文件

rules:[{
  test:/\.less$/,
  use:[
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders:2  // 加载后面的两个loader 
      }
    },
    'postcss-loader',
    'less-loader'
  ]
}]

npm
- vue-loader
- vue-complier —有可能拼错了
- require(‘vue-loader/lib/plugin’)

config/paths.js

const path = require('path')
const appDir = process.cwd()
module.exports = (relativePath) => {
    return path.resolve(appDir,relativePath)
}

用require(‘./paths.js’) 替代require(‘path’) 假设变量名为resolveApp
path.resolve(__dirname,’../src’) 变成了 resolveApp(‘./src’)

prod.js:
mode:’production’,
plugins:[
留下copywebpackplugin和cleanwebpackplugin
]
npm install -D webpack-merge
const { merge } = require(‘webpack-merge’)

webpack.merge 用来合并两个webpack对象

webpack5