前端小白webpack学习（二）

前一篇写了自我总结的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，运行后直接进入项目主页面