关于webpack:Webpack-入门基础篇

1次阅读

共计 2139 个字符，预计需要花费 6 分钟才能阅读完成。

Webpack 是一种前端资源构建工具，一个动态模块打包器。一个前端我的项目中蕴含了很多资源，然而浏览器并不一定全副意识，比方 sass、less、ts，包含 js 里的高级语法。这些资源如果想在浏览器中失常工作，必须通过编译解决。而咱们的 Webpack 就是能够集成的解决这些文件，并且汇总到一个文件中。

入口（entry）：代表着 Webpack 以那个文件为入口终点开始打包，剖析构建外部依赖图。默认值是 ./src/index.js，但你也能够通过配置 entry 属性，来指定一个（或多个）不同的入口终点。

module.exports = {entry: './path/to/my/entry/file.js'};

输入（output）: 批示 Webpack 打包后到资源 bundles 输入到哪里，以及如何命名。次要输入文件的默认值是 ./dist/main.js，其余生成文件默认搁置在 ./dist 文件夹中。

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Loader：Webpack 本身只能了解 JavaScript 和 json 文件，loader 让 Webpack 可能解决其余文件。

const path = require('path');

module.exports = {
  output: {filename: 'my-first-webpack.bundle.js'},
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader'}
    ]
  }
};

插件（plugins）：能够用于执行范畴更广的工作。从打包优化和压缩，始终到从新定义环境中的变量等。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 装置
const webpack = require('webpack'); // 用于拜访内置插件

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader'}
    ]
  },
  plugins: [new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

模式（mode）: 批示 Webpack 应用相应模式的配置。默认为 production。

module.exports = {mode: 'production'};

理解完外围根底后，当初能够尝试着去试一试实现一个 Demo

首先先创立一个文件夹叫做”Webpack 初体验“，而后在其下创立一个 src 文件夹，如图所示

而后输出指令 npm init 进行我的项目初始化，并且装置 webpack 包

配置好环境就能够开始这个 Demo 了

首先咱们在 src 目录下创立以下几个文件，为前面打包做好筹备。

data.json 文件

{
  "name": "Andy",
  "age": 18
}

Index.js 文件

/*
  index.js: webpack 入口终点文件

  1. 运行指令：开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
      webpack 会以 ./src/index.js 为入口文件开始打包，打包后输入到 ./build/built.js
      整体打包环境，是开发环境

    生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
      webpack 会以 ./src/index.js 为入口文件开始打包，打包后输入到 ./build/built.js
      整体打包环境，是生产环境
  */
import data from './data.json'
console.log(data)

function add(x, y) {return x + y;}

console.log(add(1, 2))

而后输出打包指令，在这里加一点小内容，mode 中分为开发环境和生产环境。他们最终打包的内容体积大小都是不一样的。最终咱们能拿到 built.js 文件，如下图所示

这就是打包后的文件内容

Look LooK，这就是咱们最终把 js 文件以及 json 打包后的样子，而后创立一个 index.html 文件，在 index.html 文件中引入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="../build/built.js"></script>
</body>
</html>

最终，就能够在浏览器中顺利的运行这个 html 文件

正文完