webpack

认识webpack
- 1.1 webpack是什么
- 1.2 webpack与gulp的区别
webpack的安装
webpack的起步
webpack的配置
- 4.1 动态获取路径
loder的使用
webpack中配置Vue
plugin的使用

认识webpack

1.1 webpack是什么

webpack是一个现代的JavaScript应用的静态模块打包工具

1.2 webpack与gulp的区别

gulp

1. gulp可以进行js，html，css，img的压缩打包

2. 自动化构建工具

3. 可以将多个js或css文件压缩成一个文件，并且压缩成一行，以此减少文件体积，加快请求速度和减少请求次数

4. 并且gulp有task定义处理事务，从而构建整体流程，它是基于流的自动化构建工具。

webpack

1. webpack是前端构建工具，实现了模块化开发和文件处理

2. 他的思想是“万物皆模块”

3. 它能将各个模块按需加载，不会导致加载冗余的代码

4. 它是前端模块化打包工具

区别

虽然两个都可以进行代码的压缩合并减少代码体积，但gulp.config.js中gulp的代码更加简单易懂，需要压缩合并谁就用哪个方法，而webpack样式合并需要在node环境下下载插件才能使用。另一点，gulp 是基于流的打包工具，需要谁，引用谁，并且他的压缩简单明了，后期维护起来方便，webpack则可以将具体的模块进行划分，需要哪个模块就加载哪个模块，实现按需加载，并且排除掉冗余代码，减少代码体积。

总结起来就是，gulp是基于流的自动化构建工具，但不包括模块化的功能，如果要用到的话，就需要引入外部文件，比如require.js等；而webpack是自动化模块打包工具，本身就具有模块化，并且也具有压缩合并的功能。二者侧重点不同，我认为相互结合使用会提高代码质量和代码的优化。

webpack的安装

验证 node安装成功后，输入

在这里插入图片描述

安装成功显示

webpack的起步

在终点输入

webpack ./src/mathUtils.js ./dist/bundle.js

根文件夹显示 package.json

dist文件夹显示bundle.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="/webpack的使用/webpack的起步/dist/bundle.js"></script>
</body>
</html>

aaa.js

function sum(num1, num2) {
  return num1 + num2
}
function mul(num1, num2) {
  return num1 * num2
}
// CommonJs 方式
module.exports = {sum,mul}

mathUtils.js

const { sum, mul } = require('./aaa.js')

console.log(sum(20, 20));
console.log(mul(20, 20));

在这里插入图片描述

webpack的配置

4.1 动态获取路径

第一步：终端输入下列代码进行初始化

npm init

第二步 webpack.config.js 输入

const path = require(‘path’)

全局安装webpack

npm install webpack@3.6.0 -g

局部安装webpack / –save-dev是开发时依赖 “devDependencies”

npm install webpack@3.6.0 –save-dev

loder的使用

5.1 loader是什么

loder是webpack扩展而来

加载css、图片，也包括一些高级的将ES6转成ES5代码，将typescript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等

5.2 loder—使用css文件

第一步：通过npm安装需要使用的loader

第二步：在webpack.config.js中的modules关键字下进行配置

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="/webpack的使用/03-webpack的loader/dist/bundle.js"></script>
</body>
</html>

main.js

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

console.log(sum(20, 20));
console.log(mul(20, 20));

// 依赖css文件
require('./css/normal.css')

mathUtils.js

function sum(num1,num2) {
  return num1 + num2
}
function mul(num1,num2) {
  return num1*num2
}
module.exports = {sum,mul}

webpack.config.js

const path = require('path')

module.exports = {
  // 导入
  entry: './src/main.js',
  // 导出
  // output: './dist/bundle.js'
  // 路径和文件夹分开写,路径要动态获取
  output: {
    // __dirname 保存webpack.config.js下的全局变量
    // resole()进行路径的拼接
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
  
}

normal.css

body {
  background-color: blue;
}

在这里插入图片描述

问题记录

梳理全局：

1.mathUtils.js 声明方法并导出方法

module.exports = {sum,mul}

2.main.js 导入js文件并对css文件进行依赖

require(’./css/normal.css’)

3.install适配版本的css-loader 和style-loader

“https://www.webpackjs.com/loaders/”

4.运行

npm run build

出错：

1.导入导出问题！

2.css-loader和style-loader要适配

5.3 less文件的处理

安装

npm install –save-dev less-loader less

将 css-loader、style-loader 和 less-loader 链式调用，可以把所有样式立即应用于 DOM。

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

5.4 图片文件的处理

npm install --save-dev url-loader@1.1.2

5.5 ES6转ES5的babel

webpack中配置Vue

引用VueJs的三种方式：

1.直接引用

2.CDN引入

3.npm 安装

配置Vue：

第一步：终端输入 npm install –save vue

第二步：在main.js中导入 import Vue from ‘vue’

在这里插入图片描述

6.1 el和template的区别

一般情况下，index.html代码不会变，所以其中挂载Vue实例的代码需写到template上

// 导入vue
import vue from ('vue')

new Vue({
  el: '#app',
  template:`
    <h3>{{massage}}</h3>  
  `,
  data: {
    message: "hello webpack"
  }
})

6.2 Vue的终极使用方案

进阶一

新建vue文件下的app.js

export default {
  template:`
    <h3>{{massage}}</h3>  
  `,
  data: {
    message: "hello webpack"
  }
}

main.js

import App from './vue/app'

进阶二

vue文件下新建 App.vue

<template>
  <div>
    <h3>{{message}}</h3>
  </div>
</template>
<script>
export default {
  template:`
    <h3>{{massage}}</h3>  
  `,
  data: {
    message: "hello webpack"
  }
}
</script>

main.js导入Vue

import App from (’./vue/app’)

再将.vue文件进行封装处理

npm install vue-loader vue-template-compiler –save-dev

简写文件名

config配置文件中，resolve下新增：解决扩展名问题

extensions: [’.js’，’.css’，’.vue’]，

plugin的使用

7.1 认识plugin

在这里插入图片描述

7.2 BannerPlugins 横幅

1.config 中新增

plugins: [

new webpack.BannerPlugin(‘最终版权归me所有’)

]

2.

npm run build

后 bundle.js中显示

在这里插入图片描述

7.3 HtmlWebpackPlugin使用

安装版本不符合会报错

npm install html-webpack-plugin@3.2.0 –save-dev

在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_44768794/article/details/115342108

webpack

认识webpack

1.1 webpack是什么

1.2 webpack与gulp的区别

webpack的安装

webpack的起步

webpack的配置

4.1 动态获取路径

loder的使用

5.1 loader是什么

5.2 loder—使用css文件

代码

问题记录

5.3 less文件的处理

5.4 图片文件的处理

5.5 ES6转ES5的babel

webpack中配置Vue

6.1 el和template的区别

6.2 Vue的终极使用方案

进阶一

进阶二

简写文件名

plugin的使用

7.1 认识plugin

7.2 BannerPlugins 横幅

7.3 HtmlWebpackPlugin使用

你可能也喜欢