孙肖宁

webpack的的简单使用
webpack 能够处理 JS 文件的互相依赖关系;webpack 能够处理JS的兼容问题,把高级的、浏览器不是别...
扫描右侧二维码阅读全文
03
2018/08

webpack的的简单使用

webpack 能够处理 JS 文件的互相依赖关系;webpack 能够处理JS的兼容问题,把高级的、浏览器不是别的语法,转为低级的,浏览器能正常识别的语法

webpack的安装

  1. 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令。
  2. 在项目根目录中运行npm i webpack -D安装到项目依赖中。

使用webpack进行打包

方式一:命令打包

webpack [要打包的文件的路径以及文件名] -o [打包后的文件路径以及文件名] 这是webpack4.1之后的打包命令。
webpack [要打包的文件的路径以及文件名] [打包后的文件路径以及文件名] 这是webpack4.1之前的打包命令。
方式二:配置文件

  • 在项目根目录中创建webpack.config.js
  • 由于运行webpack命令的时候,webpack需要指定入口文件和输出文件的路径,所以,我们需要在webpack.config.js中配置这两个路径:

     // 导入处理路径的模块
       var path = require('path');
    
       // 导出一个配置对象,将来webpack在启动的时候,会默认来查找webpack.config.js,并读取这个文件中导出的配置对象,来进行打包处理
       module.exports = {
           entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
           output: { // 配置输出选项
               path: path.resolve(__dirname, 'dist'), // 配置输出的路径
               filename: 'bundle.js' // 配置输出的文件名
           }
       }

此时只需要执行webpack命令就可以打包了。
此时webpack做了以下几步:

  1. 首先,webpack 发现,我们并没有通过命令的形式,给它指定入口和出口;
  2. webpack 就会去 项目的 根目录中,查找一个叫做 webpack.config.js 的配置文件;
  3. 当找到配置文件后,webpack 会去解析执行这个 配置文件,当解析执行完配置文件后,就得到了 配置文件中,导出的配置对象;
  4. 当 webpack 拿到 配置对象后,就拿到了 配置对象中,指定的 入口 和 出口,然后进行打包构建。

webpack的实时打包构建

  1. 由于每次重新修改代码之后,都需要手动运行webpack打包的命令,比较麻烦,所以使用webpack-dev-server来实现代码实时打包编译,当修改代码之后,会自动进行打包构建。
  2. 运行cnpm i webpack-dev-server -D安装到开发依赖
  3. 安装完成之后,在命令行直接运行webpack-dev-server来进行打包,发现报错,此时需要借助于package.json文件中的指令,来进行运行webpack-dev-server命令,在scripts节点下新增"dev": "webpack-dev-server"指令,发现可以进行实时打包,但是dist目录下并没有生成bundle.js文件,这是因为webpack-dev-server将打包好的文件放在了内存中。如果在运行此命令的时候显示webpack-dev-server不是内部或外部命令就对webpack-dev-server进行全局安装npm i webpack-dev-server -g
  • 把bundle.js放在内存中的好处是:由于需要实时打包编译,所以放在内存中速度会非常快
  • 这个时候访问webpack-dev-server可以使用--contentBase src指令来修改dev指令,指定启动的根目录,端口号,热更新等:

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

使用 webpack-dev-server 这个工具,来实现自动打包编译的功能的总结:

  1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖;
  2. 安装完毕后,这个工具的用法,和webpack 命令的用法,完全一样;
  3. 由于,我们是在项目中,本地安装的 webpack-dev-server , 所以,无法把它当作 脚本命令,在powershell 终端中直接运行;(只有那些 安装到 全局 -g 的工具,才能在 终端中正常执行)
  4. 注意: webpack-dev-server 这个工具,如果想要正常运行,要求,在本地项目中,必须安装 webpack
  5. webpack-dev-server 帮我们打包生成的 bundle.js 文件,并没有存放到 实际的 物理磁盘上;而是,直接托管到了 电脑的内存中,所以,我们在 项目根目录中,根本找不到 这个打包好的 bundle.js;
  6. 我们可以认为, webpack-dev-server 把打包好的 文件,以一种虚拟的形式,托管到了 咱们项目的 根目录中,虽然我们看不到它,但是,可以认为, 和 dist src node_modules 平级,有一个看不见的文件,叫做 bundle.js.

使用html-webpack-plugin插件配置启动页面

由于使用--contentBase指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.htmlscript标签的src属性,所以推荐大家使用html-webpack-plugin插件配置启动页面.

  1. 运行npm i html-webpack-plugin -D安装到开发依赖。
  2. 修改webpack.config.js配置文件如下:

     // 导入处理路径的模块
       var path = require('path');
       // 导入自动生成HTMl文件的插件
       var htmlWebpackPlugin = require('html-webpack-plugin');
    
       module.exports = {
           entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
           output: { // 配置输出选项
               path: path.resolve(__dirname, 'dist'), // 配置输出的路径
               filename: 'bundle.js' // 配置输出的文件名
           },
           plugins:[ // 添加plugins节点配置插件
               new htmlWebpackPlugin({
                   template:path.resolve(__dirname, 'src/index.html'),//模板路径
                   filename:'index.html'//自动生成的HTML文件的名称
               })
           ]
       }
  3. 修改package.json中script节点中的dev指令如下:

    "dev": "webpack-dev-server"
  4. 将index.html中script标签注释掉,因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中。

实现自动打开浏览器、热更新和配置浏览器的默认端口号

方式一:
修改package.jsonscript节点如下,其中--open表示自动打开浏览器--port 3000表示打开的端口号为3000--hot表示启用浏览器热更新

"dev": "webpack-dev-server --hot --port 3000 --open"

方式二:

  1. 修改webpack.config.js文件,新增devServer节点如下:

    devServer:{
           hot:true,
           open:true,
           port:4321
       }
  2. 在头部引入webpack模块

    var webpack = require('webpack');
  3. 在plugins节点下新增: new webpack.HotModuleReplacementPlugin()

    plugins: [ // 配置插件的节点
       new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象, 这是 启用热更新的第 3 步
       new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML  页面的插件
         template: path.join(__dirname, './src/index.html'), // 指定 模板页面,将来会根据指定的页面路径,去生成内存中的 页面
         filename: 'index.html' // 指定生成的页面的名称
       })
     ]
Last modification:August 3rd, 2018 at 05:20 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment