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

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/

  1. 全局安装 : npm install webpack webpack-cli -g
  2. 局部(项目安装):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()] //插件配置
};

核心概念如图所示:

以上功能是基础也是webpack打包的核心。以及核心配置的使用类型。

今天就分享webpack的基础,主要还是要多用多看官网文档,后续还会继续更新的,有写的不对的地方,大家可以帮我提出来哦。

 

未经允许不得转载:小月博客 » webpack 安装和使用步骤以及核心概念
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(4) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏