webpack快速上手

道路很远，脚步漫长，唯有热爱可抵漫长岁月。

---

前言

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装webpack

1、先安装node

webpack依赖node。(node安装非常简单，百度搜node进入官网，选自己电脑系统对应的，直接点开按提示安装)
安装完查看node版本：

node -v

1.2、webpack全局安装：

不推荐

npm install webpack@版本号 -g

1.3、webpack局部安装：

命令–save-dev是开发时依赖，webpack只有打包时起作用，项目实际运行中不需要。推荐这种做法，因为后面开发都是合作的，有时候自己本地的版本和团队的版本不符合。看复制下载来的代码是哪个版本，再配合安装。

npm install webpack@版本号 --save-dev

二、webpack基本使用

1.创建工程文件夹

1、创建文件夹 dist(存放之后打包的文件)、src(用于存放源文件)。后续我们在src中操作，打包文件到dist中，通常在src中有main.js，打包到dist的bundle.js

2.创建 webpack.config.js 文件

在src文件夹下，创建 webpack.config.js 文件, 代码中的path来自node，先终端:npm init(初始化).
编辑webpack.config.js文件的内容

const path= require("path");

       module.exports={
           entry:"./src/main.js", //入口

           //output:"./dist/bundle.js" //出口
           //高级写法，自动获取绝对路径
           output:{
               path:path.resolve(_dirname,"dist"),
               filename:"bundle.js"
           }
       }

3.打包命令简化

1、找到package.json(执行npm init后有),找到scripts,配置代码：

 "build":"webpack"

2、打开终端，输入命令：

npm run build

4.注意事项

(package.json中的script脚本在执行时，会按照一定顺序寻找命令对应的位置：先寻找本地(npm init后有)的node_modules/.bin中对应的命令。如果没找到，会去全局的环境变量中寻找)

5、建议

建议本地局部安装webpack，避免下载版本不一致出错。同时webpack仅仅开发时需要，项目运行时不需要，因此–save-dev

---

三、loader加载器_(掌握)

loader加载器_介绍：通过给webpack扩展对应的loader，获得加载css、加载图片、es6代码转es5·····等等功能
loader_使用：

1.npm安装需要使用的loader

1、通过npm安装需要使用的loader。(详细命令查看官网)
01_webpack_loader_使用

02_webpack_loader_诸多加载器选择

举例：npm安装css-loader

npm install --save-dev css-loader

2、根据规则配置webpack.config.js

1、把 loader 引用到你 webpack 的配置中

import css from "file.css";

2、在webpack.config.js中的modules关键字下进行配置。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

3、然后运行 webpack。

---

四、webpack结合vue_(后期用脚手架)

webpack是个打包工具，根据b站大学教的知识。似乎是这样：本地建项目，配置webbpack.config.js，终端跑npm init，安装各种loader，安装vue，这样整个项目结构搭好。

整个开发过程也和过往不一样，分成一个个模块，各种js(封装组件)导入导出。

而这还不是vue的最终使用方案，似乎学webpack就是为了vuecli脚手架的铺垫。vue的终极使用方案便是脚手架vuecli。以及利用vue-router完成的(SPA)单页面。

1、npm安装vue

vue在项目中有使用，对其有依赖，因此非开发时依赖

npm install vue --save

安装完成可以用import Vue from “vue” 导入

2、注意

运行中控制台会报错，不用慌张，往下看：

runtime-only（代码中，不可以有任何template）
runtime-compiler（代码中，可以有template，有comliler对其进行编译）
对于报错，修改webpack配置，module.export内添加

resolve:{
       alias:{
             "vue$":"vue/dist/vue.esm.js"
             }
        }

3、template与el关系

vue实例传递对象内数据添加template,总之，最后会加到el挂载实例下。
同时有el，同时有template，最后template会把el替换掉

4、vue最终使用方案：组件化开发

分文件编写组件：代码用export导出。主文件用improt导入

再高级点：创建.vue文件(有便签，有脚本，有样式，更加易懂便于书写的组件)，此法需要有vue(loader加载器)
安装vue-loader和vue-template-comliler,修改webpack配置

五、webpack更多使用

1、plugin(插件)

描述介绍:安装对webpack本身进行扩展，例如加版权解释。

使用方法：npm安装后配置webpack。

插件举例： HtmlWebpackPlugin插件(用于将index.html文件打包到dist文件夹中)
uglifyjs-webpack-plugin插件(压缩js文件)

2、本地服务器(类似open in live server)

使用方法：npm安装后配置webpack。

3、配置文件分离：

就是搞好几个的webpack.config.js功能类似的文件，但各个的功能相交或互补不同，然后想跑哪个跑哪个，随心所欲令人昏迷。

总结

webpack还是很好用的，装一下node装一下webpack，下载一下loader，配置一下webpack.config.js，跑一跑就行了。如果官网的文档看不懂，可以将链接后缀org改为com，那是国内的中文版wenpack，非官方但比较易读。