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文件，如下图所示