初见webpack

2022-10-16 14:59:30

webpack

什么是webpack

官方解释

At its core,webpack is a static module bundler for modern javaScript applications
- 从本质上来讲，webpack是一个现代的JavaScript的静态模块打包工具
何谓模块？
- 现在大多数前端模块化的方案：AMD、CMD、CommonJS、ES6，在ES6之前我们要想进行模块化开发，必须借助于其他工具，让我们进行模块化开发，并且在模块化开发完成了项目后，需要处理模块间的各种依赖，并且进行整合打包。
- 而webpack就是可以帮我们处理模块间的依赖关系，并且还可以将CSS、图片、json文件等等在webpack当作模块来使用
何谓打包？
- 就是将各种模块进行打包整合并成一个或多个包，还可以对资源进行处理，比如：压缩图片、将scss转成css、将ES6语法转成ES5语法等
webpack与grunt/gulp有什么区别
- 如果仅仅只是打包整合，grun/gulp更适合，更适合前端流程自动化，对于模块化并非它的核心。
- webpack更强调模块化开发，同时也会对资源进行打包整合

webpack的安装

安装webpack 需要先安装node.js,Node.js自带了软件包管理器（npm）。-- 由于NPM下载包需要越墙下载，不使用国内的源会很慢，这里建议换好国内的源再使用Npm
全局安装webpack：npm install webpack -g

webpack的使用

准备工作-文件夹的解析
- dist文件夹：用于存放打包后的文件
- src文件夹：用于存放我们写的源文件
  - main.js：项目入口的文件，模块化入口
- index.html：浏览器打开展示的首页
- package.json：通过npm init生成的，npm包管理的文件
js文件的打包
- 没有打包工具之前，我们通常是在index.html引入js文件，这种方法会很麻烦且因为引入顺序的关系，一些代码无法识别。
- 所以我们只需要通过将main.js打包成一个文件，这样的话引入时就会方便很多。
- webpack打包指令
  - webpack src/main.js dist/bundle.js

webpack的配置

我们通常情况下不会直接使用webpack原生的打包指令，会显得麻烦，且直接指定位置会很不方便。

我们可以新建一个webpack.config.js文件来写上需要打包的文件和打包好的文件-即入口和出口

//因为path需要绝对路径，所以我们需要这个包来动态获取路径
//在导入这个包前需要 npm init，init完成后会出现package.json
const path = require(‘path‘)

module.exports = {
  //入口：可以是字符串、数组、对象，这里入口只有一个，所以写作字符串
  entry: ‘./src/main.js‘,
  output: {
  //出口：通常是一个对象，里面有两个重要属性：path和filename
    path: path.resolve(__dirname, ‘dist‘),
    filename: ‘bundle.js‘
  },
}

大部分项目都会有一个本地安装的webpack来进行运行项目，那么怎样使用本地的webpack而不是全局的webpack呢？
1. 如果项目中没有本地webpack则需要安装
- 在项目文件夹下运行命令
```
npm install webpack@版本号 --save-dev
```
1. 之后就需要更改package.json中的scripts来修改build的运行命令："webpack"
2. 此时运行npm run build就可以执行本地的webpack
webpack loader的使用
- 通常情况下，webpack对一些我们需要打包的css、图片、ES6转ES5等打包文件是不支持，所以我们需要Lader来进行配置
  1. 查看webpack官网对应Loader使用方法，进行配置
  2. 通过npm来下载对应loader
  3. 在webpack.config.js的modules关键字来进行配置
  4. 注意：modules中对loader的加载是从右往左加载，所以对应需要先加载的要放右边。
  5. 然后在入口处把对应的文件引入即可。
- 图片loader使用注意：
  - 在图片loader的使用中，有两种方式：
    - url-loader：一种是够小（webpack.config.js中对应options中limit大小以下）的图片直接以base64的方式发送到网页上。
    - file-loader:大于url-loader我们就需要直接将图片打包上传，但在打包中图片会返回原有的路径经行储存
      - 所以我们需要在output下的publicPath:‘指定一个文件夹‘
      - 还需要在对应option下对name:‘img/指定文件名‘放在该位置下并且重命名
        
        [指定文件名]中变量写法：
        
        name:获取图片原来的名字，放在该位置
        
        hash:8：为了防止图片名称冲突，依然使用hash，但我们只保留8位
        
        ext：使用图片原来的扩展名
webpack配置Vue
1. 使用Vue.js必须引入Vue.js。
```
npm install vue --save
```
1. 经过上一步仍然不能完成，因为Vue构建的版本不同，默认运行的是runtime-only 的Vue这个版本不能运行template.所以修改
  webpack.config.js 中
```
resolve: {
// alias: 别名
alias: {
    ‘vue$‘: ‘vue/dist/vue.esm.js‘
  }
}
```
1. 最后一步依然需要引入loader使webpack可以打包Vue文件
```
npm install vue-loader vue-template-compiler --save-dev
//并配置
{
  test: /\.vue$/,
  use: [‘vue-loader‘]
}
```

webpack配置plugin

plugin 主要是对现有架构进行的扩展
使用步骤：
1. 通过npm安装所需要使用的plugins
2. 在webpack.config.js中的plugins配置插件

plugins: [
    //配置打包 html 的 htmlwebpackPlugin
    new HtmlWebpackPlugin({
      //以现有的文件为模板来打包
      template: ‘index.html‘
    }),
    new UglifyjsWebpackPlugin()
],

利用webpack 搭建本地服务器

安装服务器模块

所下载的服务器模块版本需要对应webpack的版本
npm install webpack-dev-server --save-dev

修改webpack.config.js中文件配置

devServer: {
//为哪个文件夹提供本地服务，默认为根文件夹
contentBase: ‘./dist‘,
//是否为实时刷新
inline: true
}

如果直接使用原生命令会全局寻找，所以我们继续配置package.json

"dev": "webpack-dev-server --open"

npm run dev

初见webpack

码农公寓

webpack

什么是webpack

webpack的安装

webpack的使用

webpack的配置

相关文章