webpack第一遍学习

webpack第一遍学习"/>

webpack第一遍学习

webpack是一个现代JS应用程序的静态模块打包器。当webpack处理应用程序时，它会递归构建一个依赖关系图，其中包括应用程序需要的每个模块，然后它将所有这些模块打包为一个或者多个bundle

四个核心概念

1. 入口entry
2. 输出output
3. loader
4. 插件plugins

1、入口

入口会指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口后，webpack会找出有哪些模块和库是入口起点（直接或者间接）依赖的。

const config = {entry: "./src/main.js"
}

或者

const config = {app: "./src/main.js",vendors: "./src/vendors.js"
}

2、输出

output属性会告诉你webpack在哪里输出它创建的bundle，以及如何命名这些文件，默认’./dist’

const config = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, 'dist')}
}

3、loader

loader让webpack去处理那些非js文件，因为webpack只会理解js。loader可以将所有类型的文件转换为webpack能够有效处理的模块。

const config = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.js$/,exclude: /node_modules/,loader: "babel-loader",options: [presets: ["env"]]}]}
}

4、插件

插件可以打包，优化，压缩，定义环境变量等等。使用插件只需要require(),然后添加到plugins数组中。

// 通过 npm 安装
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 用于访问内置插件 
const webpack = require('webpack'); const config = {module: {rules: [{test: /\.js$/,exclude: /node_modules/,loader: "babel-loader"}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]
};

利用webpack搭建应用

const path = require('path');module.exports = {mode: "development", // "production" | "development"// 选择 development 为开发模式， production 为生产模式entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.js$/,exclude: /node_modules/,loader: "babel-loader",options: [presets: ["env"]]}]},plugins: [...]
}```