WEBPACK+ES6+REACT入门(1/7)-创建webpack4.x项目_react 添加 webpack4.1.1-CSDN博客

本文链接：https://blog.csdn.net/qq_37104316/article/details/106227845

本文是WEBPACK+ES6+REACT入门的第一部分，主要介绍了如何创建webpack4.x项目，包括项目的初始化、目录结构设定、webpack配置、babel的使用以及html-webpack-plugin的配置。在创建项目过程中强调了webpack4.x的'约定大于配置'原则，通过实时打包编译实现代码的快速迭代。

摘要由CSDN通过智能技术生成

前言

因本人项目需求，需要进行前端技术学习，特将学习内容整理如下。
因为对前端的技术十分陌生，希望各大神批评指正！
为了方便交流与学习，特将本笔记整理为七大部分，以下内容为第一部分。

创建webpack4.x项目前

1、学习中使用工具为Microsoft VS Code。需要安装node.js。
2、因webpack各版本配置不同，在执行install命令时，可配置需求所用版本。命令举例：npm install webpack@4.1.1 -D。此命令为开发环境下（-D）安装4.1.1版本的webpack。实际创建时，各版本如下所示：

 "webpack": "^4.1.1",
 "webpack-cli": "^2.0.12"
 "webpack-dev-server": "^3.1.1"
 "html-webpack-plugin": "^3.0.6",

注意：webpack4.x中约定大于配置。目的为减少配置文件体积。

创建webpack4.x项目

1、指定路径，新建webpack-base文件夹
创建文件夹
2、使用快捷键crtl+~打开vs控制台。通过cd webpack-base进入刚才创建的文件夹，使用npm init -y命令，默认初始化一个项目（初始化成功后，根目录会出现package.json配置文件）。或使用npm init命令，逐步创建。
初始化项目

3、在VS中打开文件夹，创建源代码目录src和发布代码目录dist，目录及文件结构如下图所示：
目录结构

4、安装webpack和webpack-cli，控制台执行npm install webpack webpack-cli -D命令。创建成功后，会在package.json文件的devDependencies下显示当前安装的webpack和webpack-cli以及对应版本。

{
  "name": "webpack-base",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.1.1", //生成wepack及版本
    "webpack-cli": "^2.0.12",//生成wepack-cli及版本
  },
}

5、根目录下创建webpack的配置文件，文件名为webpack.config.js。并在文件中暴露一个向外打包的配置对象。

//向外暴露一个打包的配置对象
//当执行webpack的打包命令后，会去根目录寻找这个文件，并执行，webpack就会拿到这个向外暴露的配置对象。（node）
//webpack默认只打包处理.js后缀文件，其他无法主动处理，要在module中配置第三方loader
module.exports={
     mode:'development',//development:开发环境 production：产品环境
     }

注意：当前配置mode为开发环境，生成main.js文件未被压缩。当mode配置为production时，被压缩。
6、前面已经提到：webpack4.x中约定大于配置。所以将index.html重命名为index.js后，执行打包命令webpack。打包成功后如下图所示：
成功打包
7、打包成功后，将打包成功的main.js引入首页：<script src="../dist/main.js"></script>。随后即可打开index.html查看完成效果。

babel

使用全部特性，需要使用babel。babel支持所有ES6特性。作为一个转换器，其可以将一些高级的、浏览器不支持的API、语法转换为低级的、可识别的API、语法。
每次修改完代码后，需重新打包编译，为避免此重复工作，需要使用npm install webpack-dev-server -D命令，配置实时打包编译。

8、在package.json中添加webpack-dev-server配置，如下图所示：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot" //添加此配置
  },

9、运行npm run dev命令，实时打包编译。
此时，会自动监听页面更新。打开localhost:8080,会显示当前项目目录。
**在localhost:8080/main.js，可看到实时打包的文件。注意，此时编译的main.js在根目录，并非在dist目录下。说明：webpack-dev-server打包的文件，托管在内存中，并非在物理磁盘。可约定此文件在根目录中存在。所以，在index.html中修改main.js目录 **

  <script src="/main.js"></script>

10、打包时可添加配置，在dev后直接添加即可，如：

打包后打开浏览器：–open
指定端口号：–port 3000
热更新：–hot

html-webpack-plugin

亦可将index.html托管在内存中，此时需要安装html-webpack-plugin，
命令为：npm install html-webpack-plugin -D。
11、在webpack.config.js中导入插件，设置源文件目录及名称，以及将插件放入plugins节点。代码如下图所示：

const path =require('path')
//导入在内存中自动生成index.html 的插件
const HtmlWebPackPlugin = require('html-webpack-plugin')
//创建以上插件的实例对象
const htmlWebPackPlugin = new HtmlWebPackPlugin({
     template:path.join(__dirname,'./src/index.html'),//源文件
     filename:'index.html'//生成的内存中首页的名称
})

//向外暴露一个打包的配置对象
//当执行webpack的打包命令后，会去根目录寻找这个文件，并执行，webpack就会拿到这个向外暴露的配置对象。（node）
module.exports={
     mode:'development',//development:开发环境 production：产品环境
     //webpack4.x中，有一个很大的特性：约定大于配置 约定的默认打包入口路径为：src->index.js 
     //所以将index.html文件重命名为index.js
     plugins:[
          htmlWebPackPlugin
     ],
}

使用html-webpack-plugin插件，插件会自动将打包好的main.js追加到页面，所以首页上的src路径不要再填写。修改代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!--在localhost:8080/main.js，可看到实时打包的文件，注意，此时编译的main.js在根目录，并非在dist目录下。
        说明：webpack-dev-server打包的文件，托管在内存中，并非在物理磁盘。可约定此文件在根目录中存在。
        所以修改原src路径"../dist/main.js"为"/main.js"
    -->
    <!-- <script src="../dist/main.js"></script> -->
    <!-- 因使用了HtmlWebPackPlugin插件，插件会自动将打包好的main.js追加到页面，所以此路径不再需要 -->
    <!-- <script src="/main.js"></script> -->

</head>
<body>
    <<h1>这是首页</h1> >
</body>
</html>