weback4.0版本学习（一）

偏执的太偏执、 2023-03-13 06:14 17阅读 0赞

先建立一个文件夹并进入：

mkdir demo && cd demo

再初始化：

npm init -y
    //安装webpack
    
    npm install webpack webpack-cli --save-dev

打包方法 ：npx webpack，默认配置文件的名字：webpack.config.js。

一，webpack.config.js的配置

const path = require('path');
    // path.resolve(__dirname, 'dist'),结果就是当前目录下的dist文件夹
    module.exports = {
      mode:'development',// 两种模式，production,development，开发环境和线上环境即非压缩和压缩
      entry: './src/index.js',//入口文件，从哪个地方开始打包，相对路径就可以，
      output: {//出口，即打包后的文件名和地址
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')//绝对路径
      }
    };

自定义配置文件名打包

npx webpack --config (文件名)

在package.json中的 "scripts"中添加：

"build": "webpack --config (配置文件名)"

打包的时候直接运行 “npm run build”，就可以直接打包了！

如果在 “npm run build”打包时想传参数需要在后面添加

npm run build -- --（文件名）

想本地运行

npx webpack-dev-server

他不是打包，而是内部运行服务，进行 [http://localhost:8080/][http_localhost_8080]   进行访问！

devServer:{
        port:3000,//自定义端口号
        progess:true,//显示进度条
        contentBase:'./dist',//启动服务的目录
        compress:true,//gzip压缩
    },
    
    //直接在module.exports ={}，这里面写

在安装插件

npm add html-webpack-plugin -D

plugins:[
        new HtmlWebpackPlugin({
          templete:'./src/index.html',//将这个文件打包
          filename:'index.html',//打包后的文件名
          minify:{
            removeAttributeQuotes:true,//打包后，移除html文件中的引号
            collapseWhitespace:true,//打包后，html文件中代码一行显示
          },
          hash:true,//生成的文件后缀带随机字符串
        })
     ]

其中output文件改成下面比较好：

filename: 'bundle.[hash].js',//打包后,生成的文件名中带有随机字符串
    //[hash:8],显示8位

要想把css的文件打包到生成的代码中，需要先在js中用 require引入css ，再配置文件中添加一下代码

module:{//模块，css的打包进去，要先require('indes.css')或者less文件
        rules:[//css loader,负责解析@import 语法的
          //style-loader, 把css插入到head标签中
          //loader,特点，功能单一
          //多个loader需要[]
          //loader的解析循序是从右往左的,从下到上，
          //下面的都需要npm安装各自的loader
          {
            test:/\.css$/,
            use:[
              {
                loader:'style-loader',
                options:{
                  insertAt:'top',//把样式插入到head标签的前面，让自定义的样式生效
                }
              },
              'css-loader'
            ]
          },
          {
            test:/\.less$/,//如果不用less，这个可以不用写
            use:[
              {
                loader:'style-loader',
                options:{
                  insertAt:'top',//把样式插入到head标签的前面，让自定义的样式生效
                }
              },
              'css-loader',
              'less-loader',//把less转换css
            ]
          }
        ]
      }

要想把css文件打包成单独的css文件，需要引入插件   npm add mini-css-extract-plugin -D，                                                        也可以用extract-text-webpack-plugin，现在vue好像用的这个！.

//需要在plugin中添加
    new MiniCssExtractPlugin({
          filename:'main.css'
        }),
    如果想让less等loader,生成单独loader,需要多次引入并在use中添加MiniCssExtractPlugin.loader
    {
            test:/\.css$/,
            use:[
              MiniCssExtractPlugin.loader,//单独成一个文件 
              'css-loader'
            ]
          }

不更新了，学习webpack5

[http_localhost_8080]: http://localhost:8080/#/