webpack

webpack前端工程化的具体解决方案

功能:前端模块化开发,代码压缩,处理浏览器端js的兼容 ,性能优化

基本使用:

安装

npm i webpack@5.42.1 webpack-cli@4.7.2 -D

-S   是--save  开发上线都要使用   安装到package.js里的dependencies

-D   是--save-dev  开发使用   安装到package.js里的devDependencies

创建

在根目录下创建webpack.config.js文件

// 使用node.js中的导出语法,向外导出一个webpack的配置对象

module.exports = {

//mode用来指定构造模式  可选development(开发模式) production(上线模式)

  mode:'development'

 

}

 

development(开发模式):时间快,体积大

production(上线模式):时间慢,体积小

//在package.json的script节点下,新增dev脚本

运行 npm run dev

在npm run dev时候先去读取webpack.config.js文件.然后再去执行webpack

如果要压缩的话上面的两项直接选择上线模式

---

webpack中的打包默认约定

在4.x和5.x中默认约定:

打包入口文件:src->index.js

输出文件路径:dist->main.js

修改打包入口文件,直接去webpack的配置文件里:

const path=require('path')

 

module.exports = {

  mode:'development',

                                                                         //  entry:'指定要处理哪个文件'

  entry: path.join(__dirname, './src/index1.js'),

                                                                         // output:'输出文件存放路径'

  output: {

    path: path.join(__dirname, 'ssss'),

    filename:'bundle.js'

  }

}

path.join()是拼接路径

__dirname正在执行的文件的目录的绝对路径 

---

wabpack插件

webpack-dev-server  会启动一个实时打包的http服务器

安装

 cnpm i webpack-dev-server@3.11.2 -D

配置

 

 然后重新打包npm run dev

 html里的引用

  <!-- 加载和引用内存里的js -->

  <script src="/main.js"></script>

---

html-webpack-pluagin  插件

 将index.html文件复制一份直接放到内存里

 //0.安装

npm i html-webpack-plugin@5.3.2 -D

// 1.导入HTML插件,得到一个构造函数

const HtmlPlugin = require('html-webpack-plugin')

//2.创建HTML插件的实例对象

const htmlPlugin = new HtmlPlugin({

  template: './src/index.html',//指定源文件的存放路径

  filename:'./index.html',//指定生成文件的存放路径

})

module.exports = {

  mode: 'development',

  plugins: [htmlPlugin],//3.通过plugins节点,使htmlPlugin插件生效

}

 它还可以在内存里自动添加js文件

 

---

 devServer的配置

module.exports = {

  mode: 'development',

  plugins: [htmlPlugin],//通过plugins节点,使htmlPlugin插件生效

     //配置服务器

  devServer: {

    open: true,//初次打包完成后,自动打开默认浏览器

    //在http的协议中如果端口号80,则可以被省略

    port: 80,//配置端口号

    host:'127.0.0.1',//指定运行的地址

  }

}  

---

loader

1.webpack只能处理打包.js后缀的文件,处理不了其他后缀的文件

2.当代码中有index.css文件,无法处理

3.当webpack发现某个文件处理不了的时候,会查找webpack.config.js文件,

看module.rules数组中,是否配置了对应的loader加载器

4.webpack把index.css文件,先转交给最后一个loader处理(css-loader)

5.css-loader处理完后,会把结果给下一个loader(style-loader)

6.当style-loader处理完了,没有loader文件了,就把结果交给webpack

7.webpack会把结果进行打包合并

安装

cnpm i style-loader@3.0.0 css-loader@5.2.6 -D

配置:

 module: {

    rules: [

      //定义了不同模块对应的loader

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

    ]

  }   

---

打包处理less

安装:

npm i less-loader@10.0.1 less@4.1.1 -D

配置:

 {

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

      }

---

base64图片

img 标签是先拿标签,在去请求地址

优点:不用加载两次,

缺点:图片增大(不适合大图片,只适合小图片)

安装:

cnpm i url-loader@4.1.1 file-loader@6.2.0 -D

配置:

  // 处理图片文件base64字符串

      {

        test: /\.jpg|png|gif$/, use: 'url-loader?                                                                         limit=3000&outputPath=images'

      }

limit是控制图片转换base64大小的,如果大于这个值就不转换,小于就转换   

outputPath   是打包后的文件存放地址     

---

js高级语法打包

安装:

cnpm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

 

配置:

 {

        test: /\.js$/, use: 'babel-loader',exclude:/node_modules/

    }   

exclude:是不包括

   // 使用babel-loader处理高级的JS语法

      // 在配置babel的时候,程序员值需要把自己的代码进行转换即可,一定要排除node_modules目录中的第三方包

      //因为第三方包中的js兼容性,不需要程序员关心

 

然后创建一个babel.config.js文件  里面的配置项为: 

module.exports = {

  plugins: [['@babel/plugin-proposal-decorators'],{legacy:true}]

}   

---

打包发布

在package.js文件中添加build配置:

"scripts": {

    "dev": "webpack serve ", //serve是在内存上

    "build": "webpack --mode production"  //在物理磁盘上

  },

--mode优先级高,prodction是生产模式

---

 每次打包自动清理以前的文件

clean-webpack-plugin包

---

给文件配置别名

resolve: {//解析

  alias: {//别名

    '@':path.join(__dirname,'./src/')

  }

}

 

 

 

---