webpack 的使用

为什么需要webpack呢

现在的前端网页非常丰富，特别是SPA技术流行后，js的复杂度增加并且有时需要一大堆的依赖包，还需要解决SCSS Less
等css预处理等的编译工作。所以现在的前端已经相当依赖 webpack 来更好的管理项目了。

什么是webpack

webpack 可以看作是一个打包工具，它可以分析你的项目结构，然后找到js 模块以及一些浏览器不能直接执行的一些语言比如 Less
、TypeScript 等，并将其转换和打包为一个合法的格式以供浏览器使用。webpack从3.0之后还担负起了优化项目的功能.

demo

目录结构
| dist
– index.html
| src
– index.js
| package.json
| webpack.config.js

webpack.config.js

 // webpack.config.js
  var path = require('path') module.exports = {   entry: './src/index.js',   output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'   } }

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 id="title"></div>
  <script src="./js/bundle.js"></script>
</body>
</html>

index.js

    // index.js
    document.getElementById('title').innerHTML = 'hello webpack';

package.json

   // package.json
    {
      "name": "webpack_new_test",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --mode development"
        // "build": "webpack --config webpack.config.js --mode development"
        // 上面两种配置等价，--config webpack.config.js可以不写，默认是它。
        // webpack 4.0之后多了mode的配置，因此我们需要配置一下，不然会出现警告哦
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.4.1",
        "webpack-cli": "^2.0.13"
      }
    }

运行
执行命令$ npm run build

PS C:\xampp\htdocs\framework\node\webpack> npm run build

[email protected] build C:\xampp\htdocs\framework\node\webpack
webpack --mode development

Hash: 8b5924e8b1aa87bd8597 Version: webpack 4.30.0 Time: 119ms Built
at: 2019-04-27 20:23:29
Asset Size Chunks Chunk Names js/bundle.js 3.83 KiB main [emitted] main Entrypoint main = js/bundle.js [./src/index.js] 61 bytes {main} [built]

webpack打包配置
打包css文件
首先，先来一个css样式
在这里插入图片描述
然后在main.js中引入

保存，出了如下错误，提示err:您可能需要适当的加载程序来处理此文件类型

webpack并不能直接打包css类型的文件，所以我们要借助第三方工具
style-loader css-loader

安装：cnpm i style-loader css-loader -D

安装完毕之后，我们需要在webpack.config.js文件中配置一下

module:{//这个节点用于配置第三方模块
    rules:[//所有第三方模块的匹配规则
      {test: /\.css$/,use:['style-loader','css-loader']}//配置要处理的文件类型
    ]
  }

在这里插入图片描述

打包less文件和scss文件
安装：cnpm i less less-loader -D
安装：cnpm i node-sass sass-loader -D

在这里插入图片描述

配置

引入
保存，启动
启动

使用webpack来配置babel
详情见：
https://blog.csdn.net/weixin_44539392/article/details/86532913

前端小菜鸡儿

发布了56 篇原创文章 · 获赞 8 · 访问量 2万+

私信关注

为什么需要webpack呢

什么是webpack

猜你喜欢