webpack基本配置

前言

学习到了webpack的配置，截止到目前，还是挺复杂的，版本问题经常出bug。留个笔记记录一下吧~

认识webpack

什么是webpack？

官方的解释：

At its core,webpack is a static module bundlerfor modern JavaScript applications

从本质上讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

总结两点就是：模块or打包

和gulp对比

gulp更加强调的是前端流程的自动化，模块化不是它的核心。如果工程模块依赖非常简单，甚至没用到模块化的概念，只需要进行简单的合并、压缩，就可以使用grunt/gulp，如果整个项目使用了模块化管理。而且依赖性非常强，我们就可以使用更加强大的webpack。

webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是它附带的功能

webpack的安装

前提

webpack为了可以正常运行，必须依赖node环境

全局安装webpack

指定版本号3.6.0，因为vue cli2依赖该版本，vue cli3隐藏了webpack配置

npm install webpack@3.6.0 -g

局部安装webpack

npm install webpack@3.6.0 --save-dev

webpack的起步

在mathUtils.js中写入以下：module.exports导出函数（add同add:add,es6中语法糖可简写）

function add(num1, num2) {
  return num1 + num2
}

function mul(num1, num2) {
  return num1 * num2
}

module.exports = {
  add,
  mul
}

在main.js中写入以下: require接收导出的函数

const {add, mul} = require('./mathUtils')

console.log(add(20,30));
console.log(mul(20,30));

index.html终端中，进入到当前项目目录

接下来终端中输入webpack ./src/main.js ./dist/bundle.js（该作用把main.js打包到dist目录下的bundle.js，webpack会自动打包依赖文件）

（文件夹名称写成了srcs,已改回src）

此时dist目录下，则多了一个打包好的js文件

index.html中引入该js文件，既可以顺利运行

webpack的配置

终端输入webpack直接打包

名称必须webpack.config.js，配置成功后终端直接输入webpack即可，不需要输入webpack ./src/main.js ./dist/bundle.js

通过npm run build进行打包

package.json中配置。该配置优先使用当前项目的webpack命令。局部安装时会使用局部安装的webpack，不会使用全局

loader的使用

webpack中文文档地址

webpackjs.com

CSS文件处理

终端中输入：npm install --save-dev style-loader 以及 npm install --save-dev css-loader（具体参看官方文档）

webpack.config.js配置如下

less文件处理

终端中输入：npm install --save-dev less-loader less（vscode可自动less转换为css）

webpack.config.js配置如下

图片文件处理

终端中输入：npm install --save-dev url-loader

文件过大： npm install --save-dev file-loader

若是无报错，图片不显示，则是版本的问题，这个知识点有点多，详情看注释

es6转es5

我们只是简单的es6转换为es5，所以不需要根据官方的下载

终端输入：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

webpack中配置Vue

安装vue

终端中输入：npm install vue --save

后续实际项目中也会使用vue，所以不是开发时依赖，不用加-dev

引入vue

import Vue from ‘vue’

配置vue

runtime-only -> 代码中，不可以有任何的template(默认使用)

runtime-compiler -> 代码中，可以有template，因为有compiler可以用于编译template

解决方法：webpack.config.js中配置（和module同级）

Vue终极使用方案

终端中输入：npm install vue-loader vue-template-compiler --save-dev(14以上版本需要插件plugin)

plugin的使用

版权

webpack.config.js中，引入webpack（const webpack = require(‘webpack’)）

plugins和module平级

此时bundle.js首行中，就加入横幅

打包Html

终端中输入： npm install html-webpack-plugin --save-dev

引入html-webpack-plugin包，index.html文件中不需要引入js文件，publicPath拼接的路径记得清除

js压缩

终端中输入：npm install uglifyjs-webpack-plugin@1.1.1 --save-dev（此版本配套cli2） 接下来引入包

此时版权的注释信息会被清除，与注释不配套使用

搭建本地服务器

终端输入： npm install --save-dev webpack-dev-server@2.9.1

此时不能使用npm run build运行，package.json中配置

webpack-dev-server --open（运行后不需要手动点击）

配置文件分离

终端输入：npm install webpack-merge --save-dev

pack-dev-server@2.9.1

此时不能使用npm run build运行，package.json中配置

[外链图片转存中…(img-BYKaHmJB-1615530859844)]

webpack-dev-server --open（运行后不需要手动点击）

配置文件分离

终端输入：npm install webpack-merge --save-dev

新建一个build文件夹，新建三个js文件（base.config.js 共同配置 prod.config.js 发布配置 dev.config.js 运行配置）