webpack学习

webpack

前段工程化

1. 模块化（js,css,资源的模块化）

2. 组件化（服用现有的ui结构样式行为）

3. 规范化（目录结构的划分,编码,文档,接口 规范化,git分支管理）

4. 自动化（自动化构建 ,自动部署,自动化测试）

前段工程化解决方案

webpack (webpack 中文文档 | webpack 中文网) 项目优选

parcel (Parcel 中文网) 开发第三方包优选

什么是webpack

概念：

webpack 是前段项目工程化的具体解决方案

主要功能：

它提供了有好的 前段模块化的 开发支持, 以及代码压缩混淆, 处理浏览器端 javaScript 的兼容性 性能优化 等强大的功能

好处

让程序员把工作的重心放在具体的实现上,提高了前段的开发效率和项目的可维护性

webpack的基本使用

在项目中安装webpack

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

-S 是 --svae的简写

-D 是 --save-dev 的简写

具体参考 npmjs.com

在项目中配置webpack

1.在项目根目录中 创建名为 webpack.config.js 的配置文件,初始化一下代码

const path = require('path')
 module.exports = {
    //mode 用来指定构建模式 ， 可选值 development 和 poroduction
    mode : 'development'
    //__dirname 当前文件存放路径 
   entry : path.join(__dirname,'./src/index.js'),
   output: {
      path:path.join(__dirname,'./dist'),
      filename : 'bundle.js'
   }    
 }

2.在package.json 的scripts节点下 新增dev脚本

  "scripts": {
     "dev" : "webpack"
  }

webpack插件的作用

通过安装和配置第三方的插件 可以拓展 webpack的能力,从而让webpack用起来更方便,最长用的webpack插件有如下两个

1.webpack-dev-server

类似于node.js 的modemon 工具

每当修改了源代码.webpack会自动进行项目的打包和构建

安装

npm install webpack-dev-server@3.11.2 -D

配置

"scripts": {
    //"dev": "webpack"
    "dev" : "webpack serve"
  },

再次运行 npm run dev ，重新进行项目打包

在浏览器访问 localhost:8080 地址查看打包效果

2.html-webpack-plugin

webpack中的html插件（类似于一个模板引擎插件）

可以通过此插件自定义index.html页面的内容

npm install html-webpack-lplugin -D

3.loader

在实际开发过程中,webpack 默认只能打包处理.js后缀名结尾的模块.其他非.js后缀的模块,webpack默认处理不了, 需要调用 loader 加载器才可以正常打包,否则会报错

loader 加载器作用： 协助 webpack打包处理特定的文件模块.比如

• css-loader 可以打包处理.css相关的文件

• less-loader 可以打包处理 .less相关的文件

• babel-loader 可以打包处理 webpack 无法处理的高级js语法

  npm install style-loader  -D
  npm install css-loader -D
  npm instaill less-loader - D

配置

webpack.config.js

const path = require('path')
// 1.导入 html 插件 
const HtmlWebpackPlugin  = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
​
​
​
 module.exports = {
    //mode 用来指定构建模式 ， 可选值 development 和 poroduction
    mode : 'development',
    //__dirname 当前文件存放路径 
   entry : path.join(__dirname,'./src/index.js'),

//devtool:'eval-source-map',

    devtool:'nosources-source-map',

   /**/   
   output: {
      path:path.join(__dirname,'./dist'),
      filename : 'bundle.js'
   } ,
   plugins: [
      new HtmlWebpackPlugin({
         "template":'./src/index.html',
         "filename":"index.html"
      }),
      new CleanWebpackPlugin()
    ],
    devServer:{
      //首次打包后 自动打开浏览器
      open:true,
      //端口号
      port:80,
      //ip地址
      host:'127.0.0.1' 
    },
    module: {
      rules: [
        { test: /\.css$/i,use: ["style-loader", "css-loader"] },
        { test: /\.less$/i,use: ["style-loader", "css-loader","less-loader"] },
        {test: /\.(png|jpg|gif)$/i, use:[{loader: 'url-loader',options:{limit: 8192,}}] }
      ],
    }
 }
  

package.json

{
  "name": "webpack_demo_01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "less-loader": "^11.1.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^3.11.3"
  },
  "dependencies": {
    "jquery": "^3.6.1"
  }
}
​

html-webpack-plugin - npm