专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端之webpack构建工具的基础使用

ins518 2024-10-07 13:25:39 技术文章 16 ℃ 0 评论

引：为什么使用webpack？

在之前的开发中，我们是在html的头部引入各种js,css文件，正常情况下浏览器会向服务器发送多次请求资源的加载，这样造成请求过多，另外资源的依赖关系管理复杂。因此我们使用webpack来进行前端项目的构建，它是基于Node.js的。

1、npm包管理器，管理开源项目的依赖关系，和后端的maven比较相似；

2、合并、压缩、编码各种资源文件进行统一出口bundle.js，另浏览器不支持的各种特性比如ES6语法，webpack能够编译成浏览器能识别的js文件。

一、Node.js下载

下载后并安装后在cmd控制台中输入Node，显示版本号，则安装成功

二、准备工作

1、新建文件夹mywebpack

2、cmd到当前目录，并输入 npm init （npm init -y），一路默认，目录中生成文件 package.json

三、安装webpack

1、安装全局和本地项目的webpack，安装本地时将webpack-cli一并安装

附：安装npm的淘宝镜像，命令：然后可以使用 cnpm命令快捷使用淘宝镜像

npm install -g cnpm --registry=http://registry.npm.taobao.org

安装webpack

//全局安装 全写为 cnpm install webpack --gloal
cnpm i webpack -g
//本地安装 全写 cnpm install webpack webpack-cli --save-dev
cnpm i webpack webpack-cli -D

安装会自动下载模块文件 node_modules

三、在当前目录下新建目录和文件

引入jquery模块

mywebpack>cnpm i jquery -D

webpack打包配置文件webpack.config.js，配置后就不需要指定入口和出口

const path = require('path');
module.exports = {    
  entry: path.join(__dirname, "/src/main.js"), // 入口文件   
  output: {        
    path: path.join( __dirname, "/dist/js"), //打包后的文件存放的地方       
    filename: "bundle.js" //打包后输出文件的文件名  
  }
}

index.html

<!DOCTYPE html>
  <html lang="en">
    <head> 
    <meta charset="UTF-8">   
      <title>Title</title>  
  <!--webpack-dev-server中bundle.js位于当前根目录  <script src="bundle.js"></script>    -->  
  <script src="./js/bundle.js">
  </script>
  </head>
  <body>   
    <h1>aaa</h1>
  </body>
</html>

main.js

import $ from 'jquery'  //引入jquery 
$(function () {    
  $('h1').css('color','red');
})

控制台输入：webpack

四、构建本地服务器

注：在webpack-dev-server中，打包后的bundle.js并不存在于实际物理磁盘中，而是在在内存中，虚拟路径为当前根目录，因此本地服务器仅适用于开发环境

cnpm i webpack-dev-server -D

webpack.config.js配置

const path = require('path');
module.exports = {    
  entry: path.join(__dirname, "/src/main.js"), // 入口文件  
  output: {        
    path: path.join( __dirname, "/dist/js"), //打包后的文件存放的地方   
    filename: "bundle.js" //打包后输出文件的文件名  
  },   
  devServer: {     
    contentBase: "./dist", // 本地服务器所加载文件的目录,默认访问此目录index.html    
    port: "8088",   // 设置端口号为8088  
    inline: true, // 文件修改后实时刷新     
    historyApiFallback: true,   
  }
}

package.json文件中增script

//webpack-dev-server为启动服务器
//--open为启动后自动打开浏览器
"scripts": {  
  "dev": "webpack-dev-server --open"  
}

这样可以在控制台使用命令npm run dev启动服务器

终止服务器命令为Ctrl+C然后输入Y回车即可

启动后浏览器显示


五、Source Maps调试配置

webpack.config.js文件中增加

const path = require('path');
module.exports = {    
  entry: path.join(__dirname, "/src/main.js"), // 入口文件  
  output: {     
    path: path.join( __dirname, "/dist/js"), //打包后的文件存放的地方    
    filename: "bundle.js" //打包后输出文件的文件名   
  },    
  devServer: {   
    contentBase: "./dist", // 本地服务器所加载文件的目录    
    port: "8088",   // 设置端口号为8088     
    inline: true, // 文件修改后实时刷新     
    historyApiFallback: true, //不跳转  
  },   
  // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度  
  devtool: 'source-map'  
}

webpack打包后，如果我们的代码有bug，在浏览器的调试工具中会提示错误出现的位置

六、热更新的使用

webpack.config.js修改，热更新用于开发期打包速度的提升

 //1.导入webpack 
const webpack= require('webpack')
module.exports = {   
  entry:  __dirname + "/src/main.js",   
  output: {     
    path: __dirname + "/dist/js",   
    filename: "bundle.js"  
  },    
  devServer: {    
    contentBase: "src", // 本地服务器所加载文件的目录  
    port: "8088",   // 设置端口号为8088    
    open: true,    
    inline: true, // 文件修改后实时刷新  
    //3.开始热更新  
    hot:true    
  },    
  plugins: [    
    //2.配置插件   
    new webpack.HotModuleReplacementPlugin(),  
  ],   
  devtool: 'source-map'
}

七、html-webpack-plugin的使用

在正常开发中，我们是需要在index.html中引入bundle.js的，现在我们使用插件html-webpack-plugin来将index.html打包放于内存中，和webpack-dev-server中的bundle.js一样，都位于内存中，这时index.html中不需要<script src=""></scrip>标签了，插件会帮我们将bundle.js自动加载到内存中的index.html中

1.插件安装命令：cnpm i html-webpack-plugin -D

2.index.html中去除<script>标签

3.修改webpack.config.js文件

const webpack = require('webpack') 
//1.导入html-webpack-plugin
const htmlwebpackplugin = require('html-webpack-plugin') 
const path = require('path')
module.exports = {   
  entry:  __dirname + "/src/main.js",   
  output: {      
    path: __dirname + "/dist/js", 
    filename: "bundle.js"  
  },    
  devServer: {   
    contentBase: "src", // 本地服务器所加载文件的目录    
    port: "8088",   // 设置端口号为8088   
    open: true,        
    // inline: true,     // 文件修改后实时刷新        
    // historyApiFallback: false, //不跳转        
    hot:true  
  },    
  plugins: [    
    new webpack.HotModuleReplacementPlugin(),  
    //2.配置插件  
    new htmlwebpackplugin({ 
      //模板html原始位置     
      template: path.join(__dirname ,'/src/index.html'),  
      //3.位于内存中的文件名     
      filename: "index.html"   
    })   
  ],    
  // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度  
  devtool: 'source-map'
}

八、第三方css-loader加载器

1.安装第三方的style-loader和css-loader

 cnpm i style-loader css-loader -D

2.配置文件webpack.config.js中新增module节点

module: {  
  //此节点配置所有的第三方loader        
  rules: [  
    //匹配规则         
    {                
      test: /\.css$/,   //以.css结尾的文件        
      use: ['style-loader','css-loader']  //使用第三方加载器         
    },     
  ]   
}

index.css文件

main.js

import $ from 'jquery' 
//引入index.css文件，合并打包
import './css/index.css' 
$(function () { 
  $('li:odd').css('color', 'red'); 
  $('li:even').css('color', 'blue');
})

八、第三方url-loader加载器

默认情况下webpack不能处理css中的url属性中的图片，需要引入第三方loader

cnpm i url-loader file-loader -D

index.css

li{  
  list-style-type: none;/* 去除圆点*/   
  list-style-image: url("../images/1.jpg");
}

webpack.config.js中匹配规则

//图片+字体的匹配规则
{ 
  test: /\.(jpg|png|gif|bmp|jpeg|ttf|woff|woff2|svg|eot)$/, 
  use:'url-loader'
}

即可正常加载图片

九、第三方babel-loader

当我们在js中使用更高级的ES语法或者不支持的es语法时，默认webpack是不支持的，因此我们使用第三方的babel来配置

1.安装,babel-loader要安装7.1.5版本，默认为8版本，会报错

cnpm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D

2.webpack.config.js中配置规则

{   
  //exclude: /node_modules/要将此包排除掉，不然会将其中的所有js打包    
  test: /\.js$/, use: 'babel-loader', exclude: /node_modules/
},

3.根目录前新建配置文件 .babelrc

{  "presets": ["env","stage-0"], 
  //语法，注意此配置中不能有注释，必须用双引号 
  "plugins": ["transform-runtime"]  //插件
}

4.main.js中测试代码

//class为es6的面向对象语法
class Person {  
  static info = {name:'zs',age:30}
}
console.log(Person.info)

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表