webpack实例解析一(基础)

最新推荐文章于 2024-08-06 18:53:02 发布

秋刀鱼笛滋味

最新推荐文章于 2024-08-06 18:53:02 发布

阅读量334

点赞数 1

分类专栏： webpack 文章标签： webpack 前端 js

本文链接：https://blog.csdn.net/weixin_43206949/article/details/91888824

版权

webpack 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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

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

cnpm i webpack webpack-cli -D

创建一个demo文件夹，结构如下
在这里插入图片描述
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的包