webpack以及安装

最新推荐文章于 2025-02-18 10:10:04 发布

看见还不错

最新推荐文章于 2025-02-18 10:10:04 发布

阅读量298

点赞数 4

文章标签： webpack 前端

本文链接：https://blog.csdn.net/m0_61417250/article/details/121486240

版权

一.原理: webpack简单的来说就是一个打包器可以根据模块的关系进行分析，然后将这些模块按照一定的规则生成队形的静态资源. 但是市面上管理和打包工具不适合大型的项目。

二 webpack安装

1. 全局安装

npm install --global webpack

2.查看版本

webpack -v

3.创建一个src文件夹里面创建一个index.js

function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());
index.html

index.html

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

以上package.json需要做一下修改详细可见

package.json修改https://www.webpackjs.com/guides/getting-started/https://www.webpackjs.com/guides/getting-started/

4.创建一个dist文件夹

要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library

npm install --save lodash

src/index.js

+ import _ from 'lodash';
+
  function component() {
    var element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
+   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

dist/index.html

  <!doctype html>
  <html>
   <head>
     <title>起步</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>

执行命令

npm run build

三打包

1.webpack目录下创建配置文件webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
   path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

entry 理解它是一个主要啊在webpack的每个页面的入口，里面的每一个属性代表着一个入口文件，可以是一个对象形式，数组形式，字符串形式...

entry:是一个入口单个入口语法

const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config

entry多个入口语法


  entry:{
    index: './src/index.js',
    another: './src/another-module.js',
    print:"./src/print.js"
  },

输出(output)

是一个出口文件，也可以设置多个文件的出口方式

filename:是上面的entry的用于输出文件的文件夹名字

path:事业目标输入的绝对路径

  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },

四模块[module]

module是让js支持模块化的管理，将所用到的资源放到对应的模块中进行管理，最重要的是管理模块和模块之间的关系

五 css打包

1、安装style-loader和 css-loader

npm install --save-dev style-loader css-loader

2、修改webpack.config.js

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

3.在src文件夹中创建style.css

.hello {
    color: red;
  }

4、修改src/index.js

import './style.css';
 element.classList.add('hello');

六打包图片

1.安装 npm install --save-dev file-loader 使用 file-loader，我们可以轻松地将这些内容混合到 CSS 中

npm install --save-dev file-loader

2.修改 webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };

3.修改src/index.js 引入

 import Icon from './icon.png';


   // 将图像添加到我们现有的 div。
   var myIcon = new Image();
  myIcon.src = Icon;
  element.appendChild(myIcon);

4.修改src/style.css

 background: url('./icon.png');

5.再次打开index.html文件

七详细可见官网，如有问题请评论区评论，如果不错请点个赞

webpack 中文文档 | webpack 中文网https://www.webpackjs.com/