02《黑马程序员视频——React》创建基本的webpack4.x项目

一、运行 npm init -y 快速初始化项目，生成package.json文件

{
  "name": "reactLearn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "w": "^1.1.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^3.1.0"
  }
}

二、在根目录下创建 src 源代码目录和 dist 产品目录

三、在src目录下常创建
index.html

<script type="text/javascript" src="../dist/main.js"></script>

index.js

alert('Hello World');

四、全局运行npm i cnpm -g 安装cnpm，中国的；然后运行cnpm i webpack -D ，再安装webpack脚手架cnpm i webpack webpack-cli -D，它提供了webpack的命令行工具；注意可能需要将-D改为-g，不然webpack命令无效

五、注意：webpack 4.x提供了约定大于配置的概念；目的是为了尽量减少配置文件的体积；
默认约定：打包入口文件是src->index.js
打包输出文件是：dist->main.js
4.x中新增了mode选项，可以配置为development或production

六、添加webpack.json.js文件，配置

// 向外暴露一个打包的配置对象；
// 因为 webpack 是基于Node构建的，所以webpack支持所有Node API 和 语法
module.exports = {
    mode: 'development', //development  production
    //在 webpack 4.x 中，有一个很大的特性，就是 约定大于配置
    //约定：默认的打包入口路径是 src -> index.js
}

//目前不支持
//export default{}
//这是ES6中向外导出模块的API，与之对应的是 import ** from '标识符'
//但是node不支持，webpack是基于node的
//Node.js基于Chrome V8引擎的JavaScript运行环境

执行webpack命令，即可将index.js打包到dist中的main.js
文件目录
打开index.html文件输出Hello World

七、安装实时打包工具cnpm i webpack-dev-server -g，然后配置package.json文件，添加dev
--open默认打开浏览器，后面可以跟浏览器类型
--port 3000修改浏览器端口

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3001" 
  },

执行npm run dev将项目部署到服务器
（问题：这个时候打开src目录可能是空的，需要对index.htm做下修改就好了）
这里写图片描述
注意：
webpack-dev-server 打包好的 main.js 托管导内存中，不能物理磁盘上看到，所以在根目录下看不到。
可以认为就在根目录下可以通过http://localhost:8080/main.js访问到
所以要修改index.html中对于index.js文件的引用路径

八、若要将index.html也托管导内存中，需要安装npm i html-webpack-plugin -D(-g会找不到插件)
配置webpack.json.js文件：

const path = require('path')
//导入插件
const HtmlWebPackPlugin = require('html-webpack-plugin')

//创建一个插件的实例对象

const htmlPlugin = new HtmlWebPackPlugin({
    //源文件,注意dirname前面是两个下划线
    template: path.join(__dirname, './src/index.html'),
    //生成在内存中的名字
    filename: 'index.html'
})
//
module.exports = {
    mode: 'development'
    plugins: [
        htmlPlugin
    ]
}

新发布的index.html中会默认引用index.js文件，所以需要删除手动添加的引用

此时可以直接访问http://localhost:3001/

源码地址

02《黑马程序员视频——React》创建基本的webpack4.x项目

猜你喜欢