0
0

webpack 之 零基础入门级别，超详细

webpack是一个静态的模块化打包工具，为现代的javaScript应用程序

  • 打包bundler : webpack可以帮助我们进行打包
  • 静态的static : 我们可以将代码打包成最终的静态资源，部署到静态服务器
  • 模块化module : webpack支持各种模块化开发，ES Module . CommonJS . AMD 等
  • 现代的modern : 因为现代前端开发面临各种问题，才催生了webpack的出现和发展

我们可以编写左边的各种类型的代码，但是浏览器不能直接识别，所以需要打包工具对代码进行打包，生成可以被浏览器直接识别的静态资源(右边)

webpack是如何打包的呢

  • webpack会根据命令或者配置文件找到入口文件
  • 从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）
  • 然后遍历图，打包一个个模块（根据文件的不同使用不用的loader来进行解析）

一、webpack的使用前提

因为webpack的运行时依赖Node环境，所以需要安装Node。下载 Node.js

注：安装好node后，npm就已经存在了

二、项目初始化

1.创建webpack文件夹，进入文件夹后初始化

npm init -y

2.安装webpack (-D 安装开发依赖)

npm install webpack webpack-cli -D

3.创建文件夹src

4.src下创建js 文件夹

5.js 文件夹创建math.js

//ES6的导出
export function sum(num1,num2){
    return num1 + num2
}

6. js 文件夹创建format.js

// CommonJs的导出
const priceFormat = function(){
    return '$99.88'
}
module.exports = {
    priceFormat
}

7.src下创建index.js

import { sum } from './js/math';
const { priceFormat } = require('./js/format');

console.log(sum(20, 30));
console.log(priceFormat());

8.以上所说的目录结构如此

三、JavaScript的打包

1.修改package.json

  "scripts": {
    "build":"webpack"
  },

2.打包

npm run build

3.为了看到效果，在最外层下创建index.html，运行即可

// 引用打包后的js文件
<body>
  <script src="./dist/main.js"></script>
</body>

以上为webpack默认指定的入口和出口，下面手动配置

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

简单来说，通过webpack来打包，需要指定一个入口，指定出口

入口：需要打包的文件都要放在入口处，没放进来的不会被打包

出口：经过打包后的文件所放的地方

const path = require('path'); // 需要使用 Node内置模块

module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
    path: path.resolve(__dirname, './dist'), 
    // 打包后的js的文件名
    filename: 'boundle.js' 
  }
};

四、CSS的打包

1.在src下创建css文件夹，并在其中创建style.css

body{
  background-color: skyblue;
  /* 下面测试postcss用 */ 
  user-select: none; 
}

**2.在index.js中导入 **

import './css/style.css';

3. 下载所需CSS的loader

loader : 可以用于对模块的源代码进行转换

因为webpack默认只能打包js，如果需要打包其他模块（例如css），需要下载对应loader

css-loader : 负责将.css文件进行解析，但并不会讲解析后的css插入到页面中

style-loader : 完成页面插入css操作

npm install css-loader style-loader -D

4.在webpack.config.js文件中进行配置

const path = require('path'); // Node内置模块

module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
    path: path.resolve(__dirname, './dist'), 
    // 打包后的js的文件名
    filename: 'boundle.js' 
  },
  // 配置模块
  module: {
    // 规则
    rules: [
      {
        // 用正则表达式来进行匹配，匹配css文件
        test: /\.css$/, 
        // 使用的loader。注：这里执行顺序是从右往左走｜从下往上，先解析，再插入
        use: ['style-loader', 'css-loader'] 
      }
    ]
  }
};

五、less｜sass的配置

前提是下载了less｜scss哦，以下已less为栗子，sass下载对应的包即可

npm install less -D

1.在src下的css文件夹中创建text.less

@textColor:blue;

body{
  color: @textColor;
}

小tip : 如果使用vscode，可以安装插件 Easy LESS ，当保存less文件内容时，会自动生成对应的css文件,方便观看，不下载亦可

2.在index.js中导入

import './css/text.less'

3. 下载less的loader

npm install less-loader -D

4.在webpack.config.js文件中进行配置

const path = require('path'); // Node内置模块

module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
    filename: 'boundle.js' // 打包后的js的文件名
  },
  // 配置模块
  module: {
    // 规则
    rules: [
      {
        test: /\.css$/, // 用正则表达式来进行匹配，匹配css文件
        use: ['style-loader', 'css-loader'] // 使用的loader
      },
      {
        test: /\.less$/, // 用正则表达式来进行匹配，匹配less文件
        use: ['style-loader', 'css-loader', 'less-loader'] // 使用的loader
      }
        
      // -------css和less的配置可以合并，如下-------
      
      {
        test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
        use: ['style-loader', 'css-loader', 'less-loader'] // 使用的loader
      }
      
    ]
  }
};

六、PostCSS工具配置

**PostCSS : **

  • 是一个通过JavaScript来转换样式的工具
  • 可以帮助我们进行一些CSS的转换和适配，如自动添加浏览器前缀，css样式的重置

**使用PostCSS : **

  1. 查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader
  2. 选择可以添加所需要的PostCSS相关的插件

1.下载postcss-loader

npm install postcss-loader -D

2.下载所需要的插件

**autoprefixer **: 自动添加浏览器前缀

postcss-preset-env : 将现代的css特性转为大多数浏览器可识别的css，自动添加浏览器前缀

所以，直接用下面辣个插件即可

npm install postcss-preset-env -D

3.在webpack.config.js文件中进行配置

const path = require('path'); // Node内置模块

module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
    filename: 'boundle.js' // 打包后的js的文件名
  },
  // 配置模块
  module: {
    // 规则
    rules: [
      {
         test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
        use: [
          'style-loader',
          'css-loader',
          // 使用postcss
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [require('postcss-preset-env')]
              }
            }
          },
          'less-loader' // 先把less转换，然后再用这个插件会好点
        ]
      }
    ]
  }
};

4. 已经添加成功

5.优化一下，可以把postcss的配置专门写到一个文件中

在目录下新建postcss.config.js文件

module.exports = {
  plugins: [require('postcss-preset-env')]
};

那么 webpack.config.js只要这么写即可

const path = require('path'); // Node内置模块

module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
    filename: 'boundle.js' // 打包后的js的文件名
  },
  // 配置模块
  module: {
    // 规则
    rules: [
      {
        test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] // 使用的loader
      }
    ]
  }
};
标签： webpack 前端 javascript
本文转载自: https://blog.csdn.net/a15297701931/article/details/124611698
版权归原作者 玄鱼殇 所有， 如有侵权，请联系我们删除。
登录后发布评论

“webpack 之 零基础入门级别，超详细”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

Zabbix 配置端口监控

Python 单元测试详解：Unittest 框架的应用与最佳实践

将文件从Mac传输到 iPhone 的 6 种简单方法

Macbook Pro 的 Type-C 接口突然不工作的解决方案

Unity(2022.3.41LTS) - UI详细介绍- Button(按钮)TMP

探索高效消息处理：scala-kafka开源项目推荐

人工智能两个要素：机器学习算法+大数据

文章导航