webpack实例解析一(基础)

缺乏、安全感 2021-09-20 02:40 396阅读 0赞

webpack的作用大家都知道：把项目中的各种资源，解析后打包打一起  
**安装**

建议安装带本地 而不是全局，避免版本问题

cnpm i webpack webpack-cli -D

创建一个demo文件夹，结构如下  
![在这里插入图片描述][20190613192104525.jpg]  
**package,json**  
各种包

{
      "name": "webpack",
      "version": "1.0.0",
      "description": "",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "webpack": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "css-loader": "^3.0.0",
        "file-loader": "^4.0.0",
        "style-loader": "^0.23.1",
        "webpack": "^4.34.0",
        "webpack-cli": "^3.3.4"
      },
      "dependencies": {
        "jquery": "^3.4.1",
        "lodash": "^4.17.11",
        "node-sass": "^4.12.0",
        "sass-loader": "^7.1.0"
      }
    }

**webpack.config.js**  
webpack的配置文件

const path = require('path');
    
    console.log(path.resolve(__dirname, 'dist'))//C:\Users\Administrator\Desktop\webpack\dist
    module.exports = {
      entry: './src/index.js', // 相对当前文件的路径  =》 入口
      output: { //  输出目录 必须为绝对路径 =》输出目录，文件名
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
      },
      module: {  // 解析除js json等外的文件类型的解析器
        rules: [
          {
            test: /\.css$/,
            use: [
              'style-loader',
              'css-loader'
            ]
          },
          {
            test: /\.scss$/,
            use: [
              'style-loader',
              'css-loader',
              'sass-loader'
            ]
          },
          {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
              'file-loader'
            ]
          }
        ]
      }
    };

我们执行

node webpack.config.js

打印出输出目录，发现输出必须是绝对路径，用相对路径报错

**index.js**

入口文件

import _ from 'lodash'; // js库
    import $ from 'jquery';
    import './index.css' //css
    import './index.scss'// scss
    import Icon from './headimg.png'// 图片
    import jsonData from '../package.json' // json数据
    function component () {
      let element = document.createElement('div');
    
      element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    
      return element;
    }
    
    document.body.appendChild(component());
    
    let div = $('<div style="coloe:red;">引入js包</div>')
    $('body').append(div)
    
    // 打包图片
    var myIcon = new Image();
    myIcon.src = Icon;
    $('body').append(myIcon)
    
    console.log(jsonData)

index.scss

.scss{
      color: black;
      font-size: 30px;
    }
    .img{
      width: 100px;
      height: 100px;
      background: url(./headimg.png);
      color: red;
    }

index.css

.scss{
      color: black;
      font-size: 30px;
    }
    .img{
      width: 100px;
      height: 100px;
      background: url(./headimg.png);
      color: red;
    }

**index.html**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    
    </head>
    
    <body>
      <div class="hello">webpack 打包样式css</div>
      <div class="scss">webpack 打包样式scss</div>
      <div class="img">处理css里面的背景图</div>
      <script src="main.js"></script>
    </body>
    
    </html>

**安装package.json的包**

cnpm i

**执行webpack打包命令**

npm run webpack

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]  
控制台打包完成，文件结构发生变化如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]  
可以看到我们的js 和图片被打包进设置的输出目录

在浏览器打开index.html  
看到如下效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 2]

说明我们的js库， 图片 ，json文件 ，css ,scss都被打包成功

查看源码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 3]  
可以看到图片的路径、名称被改为打包后的，css scss被加载到head里面  
第一篇完结。期待下一篇

[20190613192104525.jpg]: /images/20210812/05b9af673b794518bcf634c77fc065b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210812/3fbece2d1e70437496f34c5fdc66de4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]: /images/20210812/43d8849e875e4d819b6fd8d70607a9dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 2]: /images/20210812/0590ce7656814b95b28dae278b845bf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 3]: /images/20210812/21d64e88e4694325abb550cb95f9293d.png