webpack 安装和使用步骤以及核心概念

记得刚刚毕业步入前端行业的时候，就是html， css， js， jq，后来才慢慢有了框架大大的增加了开发的效率，不得不说近几年前端技术的发展真的是飞快啊。稍微一打盹就跟不上技术的发展了。前面的都是废话了，今天整理一下webpack打包工具的使用，后续会持续更新… …

1. 什么是webpack ？

相信网上有很多很多介绍，但是真的越看越蒙B了，直白的说：webpack就是打包文件用的。（此处不介绍太多）

webpack is a module bundler -> (模块打包⼯具)

2. 如何使用webpack？

2-1. 准备node环境

nodeJs ： https://nodejs.org/en/

ps: 版本参考官⽹发布的最新版本，可以提升webpack的打包速度

2-2. 安装webpack

官网：https://webpack.js.org/

中文：https://www.webpackjs.com/

全局安装： npm install webpack webpack-cli -g
局部（项目安装）：npm install webpack webpack-cli -D

注意⚠️：全局安装webpack，这会将你项⽬中的webpack锁定到指定版本，造成不同的项⽬中因为webpack依赖不同版本⽽导致冲突，构建失败

检查安装


webpack -v //command not found 默认在全局环境中查找
npx webpack -v// npx帮助我们在项⽬中的node_modules⾥查找webpack
./node_modules/.bin/webpack -v//到当前的node_modules模块⾥指定webpack

3. 如何启动webpack 执行构建？

–新建空文件夹 –> 初始化 npm init –> 新建 src/index.js

# npx⽅式
npx webpack

# npm script
npm run test

修改package.json⽂件：

"scripts": {
"test": "webpack"
},

原理就是通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接。

构建成功我们会发现⽬录下多出⼀个 dist ⽬录，⾥⾯有个 main.js ，这个⽂件是⼀个可执⾏的JavaScript⽂件，⾥⾯包含webpackBootstrap启动函数。

默认配置


const path = require("path");
module.exports = {
    // 必填 webpack执⾏构建⼊⼝
    entry: "./src/index.js",
    output: {
        // 将所有依赖的模块合并输出到main.js
        filename: "main.js",
        // 输出⽂件的存放路径，必须是绝对路径
        path: path.resolve(__dirname, "./dist")
    }
};

4. webpack配置核⼼概念

webpack有默认的配置⽂件，叫 webpack.config.js ，我们可以对这个⽂件进⾏修改，进⾏个性化配置

使⽤默认的配置⽂件：webpack.config.js
不使⽤⾃定义配置⽂件：⽐如webpack.my.config.js，可以通过–config webpack.my.config.js来指定webpack使⽤哪个配置⽂件来执⾏构建

webpack.config.js配置基础结构:


module.exports = {
    entry: "./src/index.js", //打包⼊⼝⽂件
    output: "./dist", //输出结构
    mode: "production", //打包环境
    module: {
        rules: [
            //loader模块处理
            {
                test: /\.css$/,
                use: "style-loader"
            }
        ]
    },
    plugins: [new HtmlWebpackPlugin()] //插件配置
};

核心概念如图所示：