前端小白webpack学习(二)

前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry、output、plugins、loaders等。指路前端小白webpack学习(一)
下面开始webpack的具体使用。
webpack使用

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

    前端小白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

    前端小白webpack学习(二)_第2张图片

    安装完成显示:

    前端小白webpack学习(二)_第3张图片

    此时,项目中会多出一个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

      打包完之后显示:

    前端小白webpack学习(二)_第4张图片

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

    前端小白webpack学习(二)_第5张图片

    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,打包成功

    前端小白webpack学习(二)_第6张图片

    6.webpack-dev-server使用

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

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

      前端小白webpack学习(二)_第7张图片

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

    前端小白webpack学习(二)_第8张图片

    此时,运行`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,运行后直接进入项目主页面

你可能感兴趣的:(前端小白webpack学习(二))