VIP26/webpack/命令.md

1.安装npm install yarn -g

2.yarn -v 查看版本号

3.yarn init -y 初始化

4.yarn add -D webpack webpack-cli

5.yarn webpack

defer 延迟加载

entry 指定文件打包路径

默认：index.js (约定俗成) 单个打包： entry:"./src/aaa.js" 单个入口 对象类型： entry:{

     hello:"./src/a1.js",
     say:"./src/a2.js"
}

数组类型：

entry:[
    "./src/a1.js",
    "./src/a2.js"
]

mode 模式

development 开发模式
none 无
production 生产模式

output 出口

使用path:const path = require("path")
filename:"[name]-[id]-[hash].js",
filename:"fileMode.js", //指定打包后的文件名称
clean:true,//自动删除旧的打包文件 生成新的打包文件
path:path.resolve(__dirname,"dist") //指定打包后的文件

loader 加载器

安装：yarn add -D css-loader style-loader module: { 名称

rules: [ 规则
    { 
        test: /\.css$/, 匹配正则
        use: [ 使用的加载器内容：从后往前执行
            { loader: 'style-loader'}, 
            { loader: 'css-loader'}, 
            ]
         use:['style-loader','css-loader']
    },
    {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
    }
],

},

babel-loader 新的属性/特性在老版浏览器兼容

安装：yarn add -D babel-loader @babel/core @babel/preset-env

    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }

默认适配浏览器列表 "browserslist":[

"defaults"，
....

]

插件 plugin

安装:yarn add -D html-webpack-plugin plugins: [new HtmlWebpackPlugin({

title: "打包工具webpack" 标题
 template:"./src/demo.html" 模板

})],

映射源码

devtool:"inline-source-map"

开发服务器

1.yarn webpack --watch 自动打包 2.yarn add -D webpack-dev-server 服务器上的网址 启动命令 yarn webpack serve --open