概念
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文件中引入
Document
最终,就可以在浏览器中顺利的运行这个html文件