创建webpack

创建webpack项目

参考
选择一个文件夹，作为webpack项目的目录,创建进入目录 可以使用git

mkdir webpack-demo && cd webpack-demo

然后在该目录下按住shift键，并点击鼠标右键。

win7以前是点在此处打开cmd命令窗口(具体名称不记得了，反正差不多这样)

win10点击在此处打开Powershell窗口

安装:

• 进入命令窗口之后，使用npm init -y配置一些基础属性，-y的属性意思是后面的所有选项都默认为yes，后面我会详细说里面会遇到的选项，现阶段直接用-y就好

npm init -y

• npm install webpack --save-dev安装webpack，使用—save-dev，将通知计算机在package.json中添加gulp依赖 (Linux也有dev啊，大概是development开发者的缩写。。。以前一直理解为驱动)

• npm i webpack-cli --save-dev安装webpack脚手架 (i是install的简写)``js

npm install webpack webpack-cli --save-dev

然后等待下载…然后你会发现下载超慢的，毕竟服务器在国外嘛，没办法的。

要想提升下载速度的话，可以下一个npm的中国淘宝镜像，具体方法这里懒得写了(实际上我记不清怎么弄了)，文章挺多的，就搜npm淘宝镜像就有一大堆结果。。。

如果安装了淘宝镜像，把npm命令换成cnpm就行了，记得安装淘宝镜像的时候属性要加个-g哦~~ 一般他们文章都会加上-g哒，不会太坑的 (是不是已经开始下载了才看到后面说的提速的方法啊，不过可以用ctrl + c终止程序的哦~~)

等安装结束，如果没有报什么错误的话，你应该会发现，当前目录下F:\item\webpackDemo\里出现了一个文件夹和一个json文件，下面来说说这两个文件。

• package.json 项目配置文件，不能删
• node_modules 项目安装的环境文件，这个文件是根据package.json生成的，可以删除，不过建议在看完我这篇博客之前不要删。。。除非你就是那传说中的大佬。

网址导航

官网

注释 npx webpack

散列：372d458b9eb6f8014733

版本：webpack 4.41.2

时间：1536ms

建造时间：2019-12-10 14:32:42

资源大小块块名称

main.js 71 KiB 0[发射的]main

入口点main=main.js

[1]。/src/index.js 363字节{0}[已生成]

[2]（webpack）/buildin/global.js 472字节{0}[已生成]

[3]（webpack）/buildin/module.js 497字节{0}[已生成]

+1个隐藏模块



配置中的警告

尚未设置“mode”选项，webpack将回滚到此值的“production”。将“mode”选项设置为“development”或“production”，为每个环境启用默认值。

也可以将其设置为“无”以禁用任何默认行为。了解更多：https://webpack.js.org/configuration/mode/

npx webpack --config webpack.config.js

散列：b6a642b312b8fef2d3e5

版本：webpack 4.41.2

时间：236ms

建造时间：2019-12-10 14:36:25

资源大小块块名称

bundle.js 71 KiB 0[发射]主

入口点main=bundle.js

[1]。/src/index.js 363字节{0}[已生成]

[2]（webpack）/buildin/global.js 472字节{0}[已生成]

[3]（webpack）/buildin/module.js 497字节{0}[已生成]

+1个隐藏模块

配置中的警告

尚未设置“mode”选项，webpack将回滚到此值的“production”。将“mode”选项设置为“development”或“production”，为每个环境启用默认值。

也可以将其设置为“无”以禁用任何默认行为。了解更多：https://webpack.js.org/configuration/mode/

webpack-dev-server

1开启服务器
2 自动监视文件变化 热部署

npm i -D webpack-dev-server

管理资源

加载 CSS

npm install --save-dev style-loader css-loader  

加载图片

npm install --save-dev file-loader

加载数据

npm install --save-dev csv-loader xml-loader

管理输出

设定 HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

清理 /dist 文件夹

clean-webpack-plugin 是一个比较普及的管理插件，让我们安装和配置下。 版本问题

npm install clean-webpack-plugin --save-dev

选择一个开发工具 网站参考

1. webpack’s Watch Mode

2. webpack-dev-server

   npm install --save-dev webpack-dev-server
   

3. webpack-dev-middleware

   npm install --save-dev express webpack-dev-middleware
   

   HMR 修改样式表

   npm install --save-dev style-loader css-loader
   

添加一个通用模块

配置

npm install --save-dev webpack-merge

官网参考