webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
安装:
第一步: npm init -y 生成package.json文件
第二步:npm install --save-dev webpack webpack-cli
第三步:npm install --save-dev babel-loader @babel/core @babel/preset-env
babel-loader //加载器 负责处理js文件
@babel/core //编译器 解析库
@babel/preset-env // 目标文件编码规范
配置 webpack.config.js 文件:
const path = require('path');
module.exports = {
mode:'production',
entry:path.resolve(__dirname,'src')+'/index.js',
output: {
path:path.resolve(__dirname,'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: [
path.resolve(__dirname,"node-modules")
],
use: [{loader:'babel-loader'}]
},
]
}
};