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 ]
  }