正文

前端小白webpack学习（二）

IP云
IP云V管理员/2 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前一篇写了自我总结的webpack定义：为JavaScript服务的静态模块打包器 和几大基本概念 entry、output、plugins、loaders等。指路前端小白webpack学习（一）

下面开始webpack的具体使用。

webpack使用

  1. 创建新项目，项目目录如下。

    • src目录下存放项目源码，index.html作为项目入口；
    • dist目录存放打包好的文件

    2.webpack安装

    ​ webpack安装分两种：

    • 全局安装

      npm i webpack webpack-cli -g

    • 项目中安装（推荐）

      npm i webpack webpack-cli -D

    进去项目根目录，终端输入 npm i webpack webpack-cli -D

    安装完成显示：

    此时，项目中会多出一个package-lock.json和node_modules文件夹

    3.初始化项目

    ​ 终端输入 npm init -y ，完成后项目根目录多出一个package.json文件（忘截图了）

    4.webpack打包

    • 首先，在src目录下创建一个main.js文件，js中写入相应代码。为了书写方便，我又在项目中安装了jQuery，安装命令为 npm i jquery -D 

      //main.js

//js中引入jQuery模块
      
import $ from 'jquery'

$(function () {
      
  $('li:odd').css('color', 'red');
      
  $('li:even').css('color', 'blue')
      
})

    • 终端输入 webpack .\src\main.js -o .\dist\bundle.js ，将src下的main.js文件打包成bundle.js存在dist目录下（看学习视频时，老师使用的命令是 webpack .\src\main.js .\dist\bundle.js ，结果疯狂报错，后来百度之后发现是webpack版本过高，应该用 webpack .\src\main.js -o .\dist\bundle.js ）

      打包完之后显示：

    • 此时，dist目录下多出一个bundle.js文件。在index.html中引入bundle.js,页面中已经显示变化。说明打包成功。

    5.webpack配置

    ​ 项目根目录下创建webpack.config.js文件，打包时若命令中没有指定项目的打包文件，webpack则会去该文件下应用用户配置的操作。（在node中，'__dirname'指向被执行文件的绝对路径） 

    //webpack.config.js

/* node.js 中的path模块，用来处理文件路径 */
    
const path = require('path')
    
/* 向外输出配置模块 */
    
module.exports = {
    
    entry:path.join(__dirname,'./src/main.js'), //打包入口，将main.js打包
    
    output:{
    
        path:path.join(__dirname,'./dist'), //打包输出路径
    
        filename:'bundle.js'    //打包输入文件名
    
    }
    
}

    此时，删除之前dist目录下的bundle.js文件，终端中直接输入 webpack ，会重新生成一个bundle.js，打包成功

    6.webpack-dev-server使用

    webpack-dev-server是一个小型的 Node.js Express 服务器,它使用 webpack-dev-middleware 来服务于webpack的包,

    • 终端输入 npm i webpack-dev-server -D 安装webpack-dev-server，安装成功如下。

    • 点开package.json文件，在scripts标签下配置webpack-dev-server 

    此时，运行`npm run dev`，项目在打包后会自动运行在localhost上（默认为8080端口，我的8080端口被占用了，因此变成了8081）

![](https://img2018.cnblogs.com/blog/1879373/201911/1879373-20191126090743503-346502267.png)

进入http://localhost:8081/，页面显示如下

![](https://img2018.cnblogs.com/blog/1879373/201911/1879373-20191126090805378-398244847.png)

点击进入src后，显示项目主页面，即entry中配置的页面

    • webpack参数配置

      1. 在package.json中配置

      "dev":"webpack-dev-server --open --port 5000 --hot --contentBase src" 

       --open :打包完成后自动打开页面

 --port 5000：指定服务器端口号为5000

 --hot：模块热替换。配置这个参数可以让页面在加载时只替换更新过的部分，而不是页面重载

 --contentBase src：指定服务器的根目录为src目录，webpack-dev-server默认以当前目录为基本目录

      1. 或者进入webpack.config.js中，在输出模块中配置。此时package.json中应配置为 "dev":"webpack-dev-server" 

        /* node.js 中的path模块，用来处理文件路径 */
        
const path = require('path')
        
/* 向外输出配置模块 */
        
module.exports = {
        
    entry:path.join(__dirname,'./src/main.js'), //打包入口，将main.js打包
        
    output:{
        
        path:path.join(__dirname,'./dist'), //打包输出路径
        
        filename:'bundle.js'    //打包输入文件名
        
    },
        
    devServer:{  //webpack-dev-server配置
        
        open:true,
        
        port:5000,
        
        contentBase:'src',
        
        hot:true
        
    }
        
}
      • 终端输入 npm run dev ，运行后直接进入项目主页面

相关阅读

目录[+]