生成webpack新项目及其配置

生成webpack新项目

一.准备工作

windowns10系统

安装node(如何配置node-----详见: https://www.cnblogs.com/wq6195/articles/10208375.html)

二.配置文件

1.建立项目配置架构

建立根目录,命名为myproduct

在myproduct下面建立两个文件夹src和dist

在根目录建立webpack.config.js

在src中建立index.html和 index.js

目录结构为:
product-01
|-- dist //打包后的输出文件夹
|-- src //打包的入口文件夹
|-- index.html //入口html文件
|-- index.js //打包的入口js文件
|-- webpack.config.js //webpack配置文件

webpack.config.js文件示例源码如下:

module.exports = {
mode : 'development' //development(开发时的配置) production(开发结束后的配置)
}

index.html中的源码示例

这是入口文件

index.js中的源码示例

console.log('你在浏览器中按F12就可以看见我')

2.安装依赖包

• 在电脑项目根目录处打开cmd

• 运行npm init -y快速初始化项目

• 在生成的package.json中将description填一填,

• 在生成的package.json添加"private": true命令(这个命令的意思是项目声明为私有,不加这一条有可能会报错)

  package.json文件源码示例:

  {
  "name": "product-01",
  "version": "1.0.0",
  "description": "这是一个描述文件,是用来描述项目的,怎么写都行,根据公司业务来",
  "private": true,
  "main": "index.js",
  "scripts": {
  "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "webpack": "^4.28.2"
  }
  }

• 在终端运行npm install webpack webpack-cli -D,安装这两个包,安装后可能会报错,这个错完全不用理,原因可参考https://blog.csdn.net/weixin_39690767/article/details/80025538

  报错的代码如下

  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

• 然后在终端输入命令webpack可以在dist文件夹中看到一个多余的main.js,这个文件就是被压缩过的入口js文件

最终的目录结构为

product-01
|-- dist
|-- main.js
|-- src
|-- index.html
|-- index.js
|-- package-lock.json
|-- package.json
|--webpack.config.js

配置webpack-dev-server

作用: 修改完代码完成后自动打包构建,提升开发效率

一.添加服务

运行npm install webpack-dev-server -D

然后运行npm run dev,连接服务

会看见以下字样
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wdm｣: Hash: 49bb236b924fcc783444
-----------------------
第一条描述界面入口文件在哪里
第二条描述webpack把 src 中的文件托管到浏览器所对应项目根目录的内存中
第三条是Hash值

二.修改文件

在src目录下的index.html中,修改一下引入的js文件

中的main.js其实是不存在的,是webpack-dev-server虚拟出来的,原因是为了实时更新打包后的main.js文件

这是入口文件

然后在将根目录下的package.json中的script添加dev,里面open的意思是修改完代码后立即打开默认浏览器

{
"name": "product-01",
"version": "1.0.0",
"description": "这是一个描述文件,是用来描述项目的,怎么写都行,根据公司业务来",
"private": true,
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --open "
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
}
}

三.运行服务

最后在终端运行npm run dev完成实时运行浏览器的工作

配置html-webpack-plugin插件

作用:将./src/index.html中的界面渲染到项目根目录的内存中

一.添加插件

运行npm install html-webpack-plugin -D

在webpack.config.js中配置一下

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname,'./src/index.html'),
filename:'index.html'
})

module.exports = {
mode : 'development', //development(开发时的配置) production(开发结束后的配置)
plugins:[
htmlPlugin
]
}

二.运行服务

然后运行命令npm run dev,看到界面就是渲染的html界面