webpack模块化开发及配置问题

webpack和gulp区别

1.gulp是工具链、构建工具。可以配合各种插件做jps.压缩，css.压缩，less编译等，可以替代手工实现自动化工作。
2.而webpack是文件打包工具，可以把项目的各种jps.文、css.文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案。
3.在定义和使用类比中两者都有各的用途，同时webpack为初级编译程序，gulp为高级编译程序，在功能上要比webpack应用程序中多。
4.webpack可以很方便使用node_module、es6或者样式注入等功能，作为最初级的功能定位性价比最高，webpack输入输出都以js为主，对html兼顾较少，可用组件不多很难达到可用的程度。
5.gulp在编程方面较为复杂，但是可用的组件也会更多，手动编译的情况下耗时较长，同时此软件不适合初级入门者使用。

常见的模块化开发

由于各个板块之间需要传递数据，一般做法是封装成匿名函数，但是外不下更要再访问其他板块的函数就很难了，然后就有了第二种做法，声明一个对象，然后再对其添加内容，再对其进行导出

CommonJS（node）
AMD
CMD
ES6的Modules

跨域报错

报错原因： A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。
解决方案
解决方案一.：在VScode里面安装插件 live server，右击 -> open with live server
解决方案二：自己建立一个http服务

image.png

重点是ES6的模块化操作

export是导出操作

导出方式一

//导出方式一
export var a = 111;
export var sum = 222;

导出方式二

//导出方式二
var a = 111;
var sum = 222;
export { a, sum }

导出方式三（某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名）

image.png

导入

import { a, sum } from './aaa.js'
console.log(a, sum);

导出函数

//导出函数
export function fn(text) {
  console.log(text);
}

导入函数

import { fn } from './aaa.js'
fn('你好啊')

导出类

//导出类
export class persion {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  run() {
    console.log(this.name + '在奔跑');
  }
}

导入

import { persion } from './aaa.js'
var student = new persion()
student.name = '郭群博'
student.age = 18
student.run()

webpack

是一个静态模块化打包工具，让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系
打包：比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作
终端输入：webpack ./src/main.js ./dist/bundle.js（webpack 入口文件打包到的文件）
每改变一次就要重新打包，模块化思想可以混合使用

webpack的配置

image.png

配置webpack.config.js文件

const path = require('path') //引入path包（需要下载）
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'), //这个路径必须是动态的
    filename: 'bundle.js'
  },
}

然后在终端输入webpack就能打包啦

凡是在终端里面输入webpack的，都时用的全局webpack，配置下图之后，终端输入npm run build之后会按照 先局部后全局的顺序 进行打包

image.png
下载局部webpack npm install webpack@3.6.0 -save-dev

image.png

webpack中使用css文件的处理

配置webpack.config.js文件

const path = require('path') //引入path包（需要下载）
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'), //这个路径必须是动态的
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      //正则表达式
      test: /\.css$/i,
      //css loader只负责加载
      //当有多个loader的时候，会从右往左执行
      use: ['style-loader', 'css-loader']
    }, ]
  },
}

遇见bug并解决

image.png

报错原因：css-loader和style-loader的版本过高
解决方法：

修改package.json里的版本信息

image.png
终端输入命令 npm install然后再输入npm dev
重新进行打包即可

报错解决

image.png

less-loader的使用以及配置

下载对应的包 npm install less less-loader --save-dev
配置package.json文件

image.png

图片文件处方法一：file-loader,方法二：url-loader（和file-loader类似，只是选择性的将图片进行64base编码）

npm install --save-dev url-loader@1.1.2
当图片的大小小于limit的时候，他会通过base64编码，这也是limit的作用
npm install --save-dev file-loader@3.0.1
当图片大于limit的时候，会采用32位的哈希值命名图片，
让图片打包后的名字与打包前的名字相同的配置

image.png
我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/

image.png

loader以及图片名操作配置：

 {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 8192,
//自动在打包之后的文件夹下面建立一个image文件夹，并往里面打包图片
            name: 'image/[name].[hash:8].[ext]'
          }
        }
      }

webpack5之后就支持asset module type（无需下载）,使用方法：

加载图片

base64

webpack插件plugin

npm下载
导入配置文件：const { CleanWebpackPlugin } = require("clean-webpack-plugin")
配置（和module在同一级）

//每次打包前会删除前一次打包的文件
  plugins: [
    new CleanWebpackPlugin()
  ]

方便调试的设置

module.exports = {
  //设置模式
  //development 开发阶段使用
  //production 准备上市时使用
  mode: "development",
  //设置source-map，简历打包之后的js文件的映射文件，方便调试代码错误的地方
  devtool: "source-map",

es6转化成es5

babel作用，babel编译器将我们的源代码，转换成浏览器可以直接识别的另一段源代码----解析-转换-生成

方法一

npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1
配置webpack.config.json文件

{
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }

方法二：

*无需配置webpack

npm install @babel/core @babel/cli -D
安装插件：npm install @babel/plugin-transform-block-scoping -D
插件：npm install @babel/plugin-transform-arrow-functions -D
打包：npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping

方法三

由于配置过于麻烦，所以有了预设这一说
下载：npm install @babel/preset-env -D
npx babel demo.js --out-file test.js --presets=@babel/preset-env

vue版本报错

原因

image.png
解决方案
配置webpack.config.js文件

image.png

el和template

如果el和template都存在的话，template会将el替换掉

image.png
vscode中建立一个.vue的文件，代码不高亮，安装插件：vetur（要安装 0.31.1之前的）详细原因：https://blog.csdn.net/jsjcmq/article/details/110926639

vue-loader

下载 npm install vue-loader vue-template-compiler --save-dev
修改版本

image.png
更新第三方包npm install
配置webpack.config.js文件

      //配置vue-loader
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }

完成

Vue3的 .Vue文件打包

新建Vue文件，并将逻辑的部分进行导出

image.png
导入

image.png
配置
npm install vue-loader@next -D
处理template
npm install @vue/compiler-sfc -D

{
        test: /\.vue$/,
        loader: "vue-loader"
      }

加载插件

image.png

使用插件

image.png

关于import导入文件名后缀省略的问题

image.png

在webpackage.config.js文件中的resolve属性配置

image.png

关于webpack配置plugins

引入和配置（不用下载）

image.png

将文件index.html打包到dist文件夹下

image.png

安装HtmlWebpackPlugin插件
npm install html-webpack-plugin@3.2.0 --save-dev
配置webpack.config.js文件

image.png

  plugins: [new webpack.BannerPlugin('最终版权归Coderg所有'),
    new HtmlWebpackPlugin({
      //将index.html文件作为模板，在此之前别忘把index.html文件中的script引入删除
      //将output属性中的publicPath给注释掉
      template: 'index.html'
    })
  ]

将output属性中的publicPath给注释掉

image.png

将bundle.js代码压缩（丑化）

下载插件npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
配置webpack.config.js

image.png
结果（所有注释都会消除）

image.png

webpack watch的配置问题

在修改文件内容之后，live server之后，可以实时更新修改之后的内容
方法一：在package的scripts添加

image.png
方法二：在webpack配置文件中添加属性

image.png

服务器的搭建

webpack提供了一个可选的本地开发服务器，基于Node.js的express框架，可以让浏览器自动刷新，显示我们修改之后的结果

需要一个独立板块
下载对应板块 npm install --save-dev webpack-dev-server@2.9.1
配置 package.json文件中的script

image.png
在3.11.2版本的配置方法

image.png
在终端输入npm install dev,之后复制地址即可访问

image.png
配置webpack.config.js文件

image.png

  devServer: {
    //规定服务器服务哪一个文件夹,默认是根文件夹，我们这里要填写./dist
    contentBase: './dist',
    //是否要实时输出
    inline: true,
   // port: 6666
      /* inline：页面实时刷新
      historyApiFallback：在SPA页面中，依赖HTML5的history模式
       */
  }

加上--open之后再npm install dev就会自动打开网页

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

热替换

热替换：因为每一次在修改少量代码之后浏览器都会刷新整个页面，所以通过热替换之后只会刷新修改之后的内容

image.png

跨域访问之axios

原理：在中间加了另外一个服务器，起到代理的作用

image.png

区分开发环境和生产环境

生产环境（production）
开发环境（development）
步骤：1. 新建文件夹

image.png

将开发环境依赖和生产环境依赖抽离出来放在对应文件下
下载第三包 webpack-merge@4.1.5 --save-dev，分别在开发环境和生产环境配置文件引入并配置

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig, {环境配置})

4.修改公共配置打包文件位置

image.png

配置package.json文件的脚本

image.png
npm run bulid----npm run dev

webpack模块化开发及配置问题

webpack和gulp区别

常见的模块化开发

跨域报错

重点是ES6的模块化操作

webpack

webpack的配置

webpack中使用css文件的处理

报错解决

less-loader的使用以及配置

图片文件处 方法一：file-loader,方法二：url-loader（和file-loader类似，只是选择性的将图片进行64base编码）

webpack5之后就支持asset module type（无需下载）,使用方法：

webpack插件plugin

方便调试的设置

es6转化成es5

babel作用，babel编译器将我们的源代码，转换成浏览器可以直接识别的另一段源代码----解析-转换-生成

方法一

方法二：

方法三

vue版本报错

el和template

vue-loader

Vue3的 .Vue文件打包

关于import导入文件名后缀省略的问题

关于webpack配置plugins

将文件index.html打包到dist文件夹下

将bundle.js代码压缩（丑化）

webpack watch的配置问题

服务器的搭建

热替换

跨域访问之axios

区分开发环境和生产环境

推荐阅读更多精彩内容

图片文件处方法一：file-loader,方法二：url-loader（和file-loader类似，只是选择性的将图片进行64base编码）