vue教程——11 webpack

最新推荐文章于 2022-07-04 15:26:36 发布

Dormiveglia-flx

最新推荐文章于 2022-07-04 15:26:36 发布

阅读量203

点赞数

分类专栏： Vue教程文章标签： vue javascript js html5 es6

本文链接：https://blog.csdn.net/sugerfle/article/details/116720777

版权

Vue教程专栏收录该内容

14 篇文章 1 订阅

订阅专栏

vue教程——11 webpack

一 webpack介绍

webpack是一个JavaScript应用的静态模块打包工具。
webpack可以将模块资源打包成一个或者多个包，并且在打包过程中可以处理资源，例如压缩图片，将scss转成css，ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

二 webpack的第一个小demo

1.新建入口js文件main.js和mathUtils.js，main.js依赖mathUtils.js。

//1.新建mathUtils.js，用CommonJs规范导出
function add(num1,num2) {
  return num1+num2
}
function mul(num1,num2) {
  return num1*num2
}
module.exports = {
  add,mul
}

//2.新建入口js文件main.js 导入mathUtil.js文件，并调用
const {add,mul} = require("./mathUtils.js")

console.log(add(10,20))
console.log(mul(10,10))

2.使用webpack命令打包js文件
执行webpack命令：webpack ./scr/main.js -o ./dist/bundle.js （webpack3与webpack4不同，执行命令自行百度）

打包成功时，会在dist文件夹下自动生成了一个bundle.js。以下就是bundle.js文件

bundle.js

//2.新建入口js文件main.js 导入mathUtil.js文件，并调用
const {add,mul} = __webpack_require__(1)

console.log(add(10,20))
console.log(mul(10,10))

/***/ }),
/* 1 */
/***/ (function(module, exports) {

//1.新建mathUtils.js，用CommonJs规范导出
function add(num1,num2) {
  return num1+num2
}
function mul(num1,num2) {
  return num1*num2
}
module.exports = {
  add,mul
}

3.新建一个index.html文件，导入bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack入门</title>
</head>
<body>
  <!-- 3.新建一个indexhtml文件并使用 webpack ./src/main.js ./dist/bundle.js webpack3使用此命令 -->
  <!-- 4.引用webpack打包后的js文件 -->
  <script src="./dist/bundle.js"></script>
</body>
</html>

	注意：不管是es6的模块化还是CommonJs的模块化，webpack都可以帮我们打包，还可以帮我们处理模块之间的依赖。

三 webpack的配置

如果每次都用webpack命令自己写入口文件和出口文件会很麻烦，此时我们可以使用webpack的配置。

3.1 在根目录下新建一个webpack.config.js

webpack.config.js

//1.导入node的path包获取绝对路径，需要使用npm init初始化node包
const path = require('path')

//2.配置webpack的入口和出口
module.exports = {
  entry: './src/main.js',//入口文件
  output:{
    path: path.resolve(__dirname, 'dist'),//动态获取打包后的文件路径,path.resolve拼接路径
    filename: 'bundle.js'//打包后的文件名
  }
}

3.2 在根目录下执行npm init初始化node包，因为配置文件中用到了node的path包

npm init

3.3 使用webpack打包

webkpack

这样入口和出口的配置已经配置完成了，只需要使用webpack命令就行了。

3.4 项目中使用情况
一般来是我们使用的是

npm run dev//开发环境
npm run build//生产环境

在package.json中的script中加上

"build": "webpack"

使用npm run build

npm run build

四 webpack的loader

4.1 什么是loader

webpack可以将js、图片、css处理打包，但是对于webpack本身是不能处理css、图片、ES6转ES5等。

此时就需要webpack的扩展，使用对应的loader就可以。

loader使用

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

步骤二：通过webpack.config.js中的modules关键字下进行配置

大部分loader可以在webpack的官网找到对应的配置。

4.2 webpack处理css文件

1.将除了入口文件（main.js）所有js文件放在js文件夹，新建一个css文件夹，新建一个normal.css文件

normal.css

body{
  background-color: red;
}

2.main.js导入依赖

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

3.安装css-loader

npm install --save-dev css-loader

4.安装使用style-loader

npm install --save-dev style-loader

5. 在webpack.config.js文件中有以下内容

  module: {
    rules: [
      {
        test: /\.css$/,//正则表达式匹配css文件
        //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }]//使用loader
      }
    ]
  }

webpack使用多个loader是从右往左解析的，所以需要将css-loader放在style-loader右边，先加载后解析。

五小例子： webpack的less文件处理

1.在css文件夹中新增一个less文件

special.less

@fontSize:50px;//定义变量字体大小
@fontColor:orange;//定义变量字体颜色
body{
  font-size: @fontSize;
  color: @fontColor;
}

2.main.js中导入less文件模块

//5.依赖less文件
require('./css/special.less')
//6.向页面写入一些内容
document.writeln("hello,zzzz!")

3.安装使用less-loader

npm install --save-dev less-loader less

在webpack.config.js中使用less-loader

  module: {
    rules: [
      {
        test: /\.less$/,//正则表达式匹配css文件
        //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }, {
          loader: 'less-loader'//less文件loader
        }]//使用loader
      }
    ]
  }

4.执行npm run build

六各种常用loader用法

webpack打包各种css、js、img等资源的核心，就是使用各种各样的loader。比如

style-loader：只负责css文件加载，不负责解析
style-loader：解析css文件
less-loader：解析less文件
url-loader：解析图片
babel-loader：转码
等等



//1.导入node的path包获取绝对路径，需要使用npm init初始化node包
const path = require('path')

//2.配置webpack的入口和出口
module.exports = {
  entry: './src/main.js',//入口文件
  output:{
    path: path.resolve(__dirname, 'dist'),//动态获取打包后的文件路径,path.resolve拼接路径
    filename: 'bundle.js',//打包后的文件名
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
      // 6.1 正则表达式匹配css文件。
        test: /\.css$/,
        //css-loader：只负责css文件加载，不负责解析，要解析需要使用style-loader
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }]
      },
      {
      // 6.2 正则表达式匹配less文件
        test: /\.less$/,
        //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }, {
          loader: 'less-loader'
        }]
      },
      {
      // 6.3 匹配png/jpg/gif格式图片
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,//图片小于8KB时候将图片转成base64字符串，大于8KB需要使用file-loader
              name: 'img/[name].[hash:8].[ext]'//img表示文件父目录，[name]表示文件名,[hash:8]表示将hash截取8位[ext]表示后缀
            }
          }
        ]
      },
      {
      //6.4 匹配JS文件
        test: /\.js$/,
        //排除node模块的js和bower的js
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            //如果要使用@babel/preset-env这里需要在根目录新建一个babel的文件
            // presets: ['@babel/preset-env']
            //这里直接使用指定
            presets: ['es2015']
          }
        }
      }
    ]
  }
}

七 webpack的plugin

plugin插件用于扩展webpack的功能的扩展，例如打包时候优化，文件压缩。

loader和plugin的区别

loader主要用于转化某些类型的模块，是一个转化器。

plugin主要是对webpack的本身的扩展，是一个扩展器。

plugin的使用过程

步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要在安装)

步骤二：在webpack.config.js中的plugins中配置插件。

之前我们的index.html文件都是存放在根目录下的。

在正式发布项目的时候发布的是dist文件夹的内容，但是dist文件夹是没有index.html文件的，那么打包就没有意义了。

所以我们需要将index.html也打包到dist文件夹中，这就需要使用**HtmlWebpackPlugin**插件了。

HtmlWebpackPlugin：

自动生成一个index.html文件（指定模板）

将打包的js文件，自动同script标签插入到body中

首先需要安装**HtmlWebpackPlugin**插件

npm install html-webpack-plugin --save-dev

使用插件，修改webpack.config.js文件中的plugins部分

//获取htmlWebpackPlugin对象
const htmlWbepackPlugin = require('html-webpack-plugin')
//2.配置plugins
module.exports = {
    ...
    plugins:[
        new htmlWbepackPlugin({
          template: 'index.html'
        })
      ]
}

1.template表示根据哪个模板来生成index.html

2.需要删除output中添加的publicPath属性，否则插入的script标签的src可能有误

再次打包，打开dist文件夹，多了一个index.html

压缩打包代码插件

uglifyjs-webpack-plugin是第三方插件，如果是vuecli2需要指定版本1.1.1。

安装：

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

配置plugin

//获取uglifyjs-webpack-plugin对象
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
//2.配置plugins
module.exports = {
    ...
    plugins:[
        new htmlWbepackPlugin({
          template: 'index.html'
        }),
    	new uglifyjsWebpackPlugin()
      ]
}

八 webpack 构建本地服务器

1、安装webpack-dev-server

npm install --save-dev webpack-dev-server@2.9.1

2、在package.json中的scripts对象中添加如下命令，用以开启本地服务器

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },

3、下载好之后需要在webpack.config.js里面配置下devServer

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/index.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'bundle.js'
    },
    mode:"development",
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{
        contentBase:path.resolve(__dirname,'dist'),//本地服务器所加载的页面所在的目录
        host:'192.168.118.221',
        compress:true,
        port:8081
    }//  配置webpack服务
}