Webpack详解

webpack学习过程的笔记记录

Webpack详解

认识webpack

模块和打包

webpack依赖于node环境，node环境包含各种依赖的包，npm是node包的管理工具**    

 **node依赖于package.json（通过npm init生成）      package.json依赖：输入npm install会自动帮你生成依赖 文件**

**webpack.config.js （自己创建）   配置入口出口等** 

**利用plugin插件打包index.html文件和压缩js文件**

**利用loader转化SE6  或  css等；利用plugin插件扩展webpack**

**开发模式搭建本地服务器（dev）    生产模式压缩js代码

前端模块化

webpack会帮你处理你的一些列的模块化内容和他们之间的依赖，处理成浏览器能识别的东西。最终帮你打包，然后将打包的东西部署给服务器就ok啦（index中只需要引用最终打包后的js文件即可）

webpack和grunt/gulp的对比

各种依赖之间的关系：

webpack依赖于node环境，node环境包含各种依赖的包，npm是node包的管理工具

node依赖于package.json（通过npm init生成） package.json依赖：输入npm install会自动帮你生成依赖 文件

package.json 里面有安装的各种环境的版本号，有脚本scripts

webpack.config.js （自己创建） 配置入口出口插件等

利用plugin插件打包index.html文件和压缩js文件

利用loader转化SE6 或 css等；利用plugin插件扩展webpack

开发模式搭建本地服务器（dev） 生产模式压缩js代码

webpack的安装

各种依赖之间的关系：

webpack依赖于node环境，node环境包含各种依赖的包，npm是node包的管理工具

node依赖于package.json（通过npm init生成） package.json依赖：输入npm install会自动帮你生成依赖 文件

webpack.config.js （自己创建） 配置入口出口等

利用plugin插件打包index.html文件和压缩js文件

项目、服务器、用户

node下载 Download | Node.js (nodejs.org)

黑窗口利用node的npm工具安装适应与Vue cli2依赖的3.6.0版本webpack

webpack的起步

创建几个文件夹

dist（distribution（发布））----存放打包的东西，只需要把这个文件夹给服务器，让服务器发送这个文件夹即可

src（存放开发的东西）

用webpack将main.js文件打包到dist文件夹下的bundle（打包）文件中（同时自动处理模块中的依赖）

webpack ./src/main.js ./dist/bundle.js

require函数帮助解析的：

打包完成后只需要在index文件中引用打包解析后的文件即可

webpack的配置

目的：直接写一个webpack就能直接打包文件

一旦项目中需要用node相关的东西的时候建议先做初始化处理

两个配置（build 出口入口）

一、webpack.config.js 配置入口出口

二、npm init配置package.json scripts最后增加个build和dev

node依赖于package.json 如果package.json依赖的有东西，输入npm install会自动帮你生成依赖 文件

webpack.config.js 文件中的代码解释（将入口和出口的东西放在同一个文件中了） ：webpack起步的精简版

// 利用node语法导入
const { dirname } = require('path')
const path = require('path')//去node包里找path文件(需要先导入webpack依赖的包 npm init  生成)
module.exports = {
   entry: './src/main.js' ,
   output: {
    //    path: './dist',//错误，报错提示 此路径不是一个绝对路径
        // 导包成功后
                // path模块中有一个resolve函数，函数里面可以拼接两个路径
                    //  dirname是node自带的一个全局变量，其保存的就是你当前文件所在的路径   进而转化为我们最后需要的全局路径
        path: path.resolve( dirname,'dist'),
       filename: 'bundle.js'
   },
}

方法一：输入webpack生成打包后的文件

做好以上前期工作后，在直接输入webpack直接敲回车 即可生成打包后的burdle文件

方法二：输入 npm run build 生成打包后的文件

注意

写在scripts中，会优先在本地寻找webpack而不是全局（在终端控制台） 为了避免版本不一样而出错，安装本地webpack文件

package.json文件中多了一个本地版本号：

loader的使用

什么是loader（转化）

配置loader

loader安装方法链接：css-loader | webpack 中文文档 (docschina.org)

控制台输入：

npm install --save-dev css-loader

webpack.config.js文件中配置

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

const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.css$/i,
            // css-loader只负责加载css文件，不帮助解析
            // style-loader负责将样式添加到DOM中
            // 放在左边的理由，use顺序从左到右
            use: ["style-loader", "css-loader"],
          },
        ],
      },
   
}

bug解决（版本过高）：

(4条消息) webpack打包css报错（已解决）：UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function_Coder小何-CSDN博客

手动下调了一下版本

 "css-loader": "^3.3.0",
    "style-loader": "^1.0.0"

然后再命令行中 依次输入：

npm install
npm dev

webpack-less文件处理（可以写样式）

1.创建less文件

2.main中引入less文件

// 4.依赖less文件
require('./css/special.less')

3.配置less文件

3.1 配置less和less-loader

配置链接：less-loader | webpack 中文文档 (docschina.org)

首先，你需要先安装 less 和 less-loader：

npm install less less-loader --save-dev

然后将该 loader 添加到 webpack 的配置中去，例如：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },
};

4.配置url-loader

配置链接：loader (docschina.org) url-loader (docschina.org)

图片内存小于代码的limit(默认8kb—8196)内存时：

图片自动被转化为base64位

图片内存大于代码的limit内存时：

需要控制台安装：

npm install file-loader --save-dev

图片自动打包被转化为新名称放在dist文件夹下，但这个的路径网页找不到------->更改配置

总结：

默认打包后是没有重复的32位的hash值，为了防止名字重复，而又能清楚的认识自己的图片，更新配置：

5.ES6语法处理

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

 {
            //   检测js代码
            test: /\.m?js$/,
            // exclude（排除这个文件夹中的东西） 
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['es2015']
              }
            }
          }

webpack中配置Vue

引入Vue.js

报错

原因：

el和template的区别

同时有el和template时，template会替换el

Vue文件封装处理

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

报错信息：缺少一个插件

解决方案：安装插件或降低版本

webpack-plugin（插件）的使用

认识plugin

如果把loader理解为加载器（转化器），则plugin可以理解为扩展器

添加版权的Plugin

在webpack.config.js文件中配置

const webpack = require('webpack')
module.exports({
	plugin: [
	new webpack.BannerPlugin('最终版权归灰灰所有')
	]
})

打包html的plugin

为了使index文件也放到dist文件夹中

// 打包index文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports({
	plugin: [
	  new HtmlWebpackPlugin({
        template: 'index.html'
      })
	]
})

js压缩的Plugin

// 压缩js代码
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports({
	plugin: [
	   new UglifyjsWebpackPlugin()
	]
})

总结

// 版权信息插件
const webpack = require('webpack')
// 打包index文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 压缩js代码
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

 plugins: [
      new webpack.BannerPlugin('最终版权归灰灰所有'),
      new HtmlWebpackPlugin({
        template: 'index.html'
      }),
      new UglifyjsWebpackPlugin()
    ]

搭建本地服务器

为了提高编译效率，提供一个内存（比磁盘读取的快很多），而不是在磁盘中（执行npm run build后才会存在磁盘中） 时刻编译打包，实时预览

服务于哪个文件夹，最终生成

环境配置

 module.exports({
    devServer: {//搭建本地服务器
      // 提供一些选项让知道服务于哪个文件夹
      contentBase:'./dist',
      // 实时监听 刷新
      inline: true
    }
 })

控制台输入

npm run build

（在构建项目中，最终成品）

webpack-dev-server

​ (在本地服务器中)，但是报错：原因 （只要在终端敲命令都会在全局寻找）这样是在全局里面找的，而我们刚刚安装的没有加“g” 属于局部安装

绝对路径指定（可以）

然后控制台输入：bpm run dev

终止webpack-dev-server：corl+c

webpack配置文件的分离

开发时依赖的文件与发布时依赖的文件

需要安装：

npm install webpack-merge --save-dev

合并分离的base和prod base和dev

npm install webpack-merge --save-dev

		prod.config.js文件：

// 压缩js代码
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
// 合并prod和base文件
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')//导入
//    使用webpackMerge插件，对两个文件进行合并       关联baseConfig 与 本地配置
module.exports = webpackMerge(baseConfig,{
    plugins: [//插件(数组类型)
      new UglifyjsWebpackPlugin()
    ]
})

		dev.config.js文件：

// 合并dev和base文件
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')//导入

module.exports = webpackMerge(baseConfig,{
  devServer: {//搭建本地服务器
    // 提供一些选项让知道服务于哪个文件夹
    contentBase:'./dist',
    // 实时监听 刷新
    inline: true
  }
})

分离的最后操作

配置完之后就可以删除文件了

更改配置：

更改前

   //更改后
   "build": "webpack   --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open  --config ./build/dev.config.js"

更改前：

更改后：

output: {
        path: path.resolve(__dirname,'../dist'),
        filename:'bundle.js',
        // publicPath:'dist/'  //配置后以后只要牵扯到url的东西都会自动加一个 dist/  路径
    },

// 实时监听 刷新
inline: true
}
})

###### 分离的最后操作

配置完之后就可以删除[外链图片转存中...(img-9r7soGto-1621127053362)]文件了

更改配置：

更改前

[外链图片转存中...(img-ipjt1yw5-1621127053363)]

//更改后
“build”: “webpack --config ./build/prod.config.js”,
“dev”: “webpack-dev-server --open --config ./build/dev.config.js”

更改前：

[外链图片转存中...(img-rP9GHUOY-1621127053363)]

更改后：

output: {
path: path.resolve(__dirname,’…/dist’),
filename:‘bundle.js’,
// publicPath:‘dist/’ //配置后以后只要牵扯到url的东西都会自动加一个 dist/ 路径
},