乐趣区

关于webpack:Webpack-入门基础篇

概念

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

Webpack 外围根底

entry

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

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

output

输入(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

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'}
    ]
  }
};

plugin

插件(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

模式(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 文件

退出移动版