webpack_study - day01

webpack

webpack是前端项目构建工具,它提供了模块化支持,代码压缩混淆,解决js兼容性问题,性能优越,提高了开发效率和项目的可维护性

webpack的基本使用

项目创建流程

  • 创建项目目录并初始化 命令行创建**package.json**依赖包

    >>> npm init -y
    
  • 创建src文件夹存放项目文件及js文件

  • npm安装webpack

    >>>npm install webpack webpack-cli -D
    
  • 在根目录下创建webpack.config.js 的配置文件并编写 (必要 用来配置webpack)

    module.exports = {
            mode:"development"
        }
    
    • mode :项目的编译模式
    • development :开发模式
    • production :发布模式
  • 修改项目中的package.json文件添加运行脚本dev

    "scripts":{
    	"dev":"webpack"
    }
    
    • scripts :脚本。 scripts节点下的脚本,可以通过 [npm run dev]运行,将会启动webpack进行项目打包
  • 运行dev命令进行项目打包,并在页面中引入项目打包生成的js文件:

    >>>npm run dev
    
    • webpack打包完成后会在根目录中自动创建dist文件, 用来存放打包后的src中的文件
    • 需将dist中的js文件引入到项目html页面中(将dist/main.js 替换成 src/index.js)
  • 浏览项目页面 index.html

webpack打包的入口和出口 entry/output

在webpack 4.x中,默认设置:

src/index.js作为默认的打包入口js文件

dist/main.js 作为默认的打包输出js文件

自定义入口和出口

通过webpack.config.js来设置入口/出口的js文件:

const path = require("path");
module.exports = {
 mode: "development",
 entry: path.join(__dirname, "./src/entry_fileName.js"),
 output: {
     path: path.join(__dirname, "./dist"),
     filename: "output_fileName.js"
 }
}
  • 导入path模块 可以更方便处理文件路径
  • entry 设置入口文件路径
  • output 设置出口文件
  • entry_fileName / output_fileName 自定义入口/出口文件名
  • output参数:[ path:设置出口路径 / filename:设置出口文件名 ]

webpack自动打包 /web-dev-server

–默认情况下,我们更改入口js文件的代码,需要重新运行命令打包webpack,才能生成出口的js文件,这样操作会非常繁琐。

–自动打包功能在打包后不会直接跳出命令,会监听数据的更新,并在页面上呈现最新的数据。退出自动打包需按 ctrl +c 命令

打包步骤:

  • npm安装自动打包功能的包:

    >>> npm install webpack-dev-server -D
    
  • 修改package.json中的dev指令:

    "scripts":{
    	"dev":"webpack-dev-server"
    }
    
    //修改前的dev:"webpack"
    
    • 有时打包后会因版本报错 解决方案: 将"webpack-dev-server"替换成"webpack web"
  • 将引入的js文件路径更改为:

    <script src="/output_fileName.js"></script>
    
    • 打包后会在根目录下自动创建一个output_fileName.js的隐藏的js文件,可直接调用
  • 运行cmd 进行打包

    >>> npm run dev
    
  • 打开网址查看效果:http://localhost:8080

    • 在自动打包完毕之后,默认打开服务器网页,实现方式就是打开

    • 可通过修改dev命令修改默认的网址

      "dev": "webpack-dev-server --open --host 0.0.0.1 --port 8888"
      
      • 修改后 可通过访问 http://0.0.0.1:8888访问

配置预览页面 html-webpack-plugin

–使用html-webpack-plugin 可以生成一个预览页面。

–因为当我们访问默认的 http://localhost:8080/的时候,看到的是一些文件和文件夹,想要查看我们的页面还需要点击文件夹点击文件才能查看,那么我们希望默认就能看到一个页面,而不是看到文件夹或者目录。

实现默认预览页面功能的步骤如下:

  • 安装默认预览功能的包:

    >>> npm install html-webpack-plugin -D
    
  • 修改webpack.config.js文件:

    //导入包
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    //创建对象
    const htmlPlugin = new HtmlWebpackPlugin({
    //设置生成预览页面的模板文件
    template:"./src/index.html",
    //设置生成的预览页面名称
    filename:"index.html"
    })
    
  • 修改webpack.config.js文件,添加plugins信息:

    module.exports = {
    	//......
    	plugins:[ htmlPlugin ]
    }
    
上一篇:流程控制Day01—用户交互Scanner


下一篇:Docker基础学习day01