webpack

Publish Date: 2023-04-25

1：常见配置

1、文件打包的出口和入库
2、webpack如何开启一台服务
3、webpack如何打包图片，静态资源等
4、

安装

1 2	npm i webpack webpack-cli -D (开发生产不要下载)

入口文件 src/
出口 dist/

package.json

scripts

"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch",
"dev": "webpack-dev-server"

webpack 配置入出口

module.exports = {
  entry : './src/index.js'  // 配置打包入口文件
  output : { // 配置打包完成的出口文件 路径 
    path : path.resolve(__dirname , './dist/'),
    filename : 'building.js'
  }
}

优化输出的文件名称，为了缓存 hash，自动引入到html 里面

1	npm i -D html-webpack-plugin

多入口文件

多入口文件如何开发

plugins:[
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'../public/index.html'),
        filename:'index.html',
        chunks:['main'] // 与入口文件对应的模块名
      }),
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'../public/header.html'),
        filename:'header.html',
        chunks:['header'] // 与入口文件对应的模块名
      }),
    ]

如图

每次执行npm run build 会发现dist文件夹里会残留上次打包的文件，这里我们推荐一个plugin来帮我们在打包输出前清空文件夹clean-webpack-plugin,

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

css 解析

要一些loader来解析我们的css文件

npm i -D style-loader css-loader
或者
npm i -D less less-loader

实现css3代码自动补全，也可以运用到sass、less

1、 display: flex;

1
2
3

display: -webkit-box;
display: -ms-flexbox;
display: flex;

这时候我们发现css通过style标签的方式添加到了html文件中，但是如果样式文件很多，全部添加到html中，难免显得混乱。这时候我们想用把css拆分出来用外链的形式引入css文件怎么做呢？

1	npm i -D mini-css-extract-plugin

图片

拆分多个css 【mini-css-extract-plugin会将所有的css样式合并为一个css文件】

1	<!--npm i -D extract-text-webpack-plugin@next-->

如图

打包图片、字体、媒体、等文件

1、file-loader
2、url-loader

如图

babel 转义 js

为了使我们的js代码兼容更多的环境我们需要安装依赖

1	npm i -D babel-loader @babel/preset-env @babel/core

// webpack.config.js
module.exports = {
    // 省略其它配置 ...
    module:{
        rules:[
          {
            test:/\.js$/,
            use:{
              loader:'babel-loader',
              options:{
                presets:['@babel/preset-env']
              }
            },
            exclude:/node_modules/
          },
       ]
    }
}