webpack4使用过程

1、新建工程，如webpack_prac

2、在工程文件路径下，执行 npm init 命令初始化项目

命令行会要你输入一些配置信息，我们这里一路按回车下去，生成一个默认的项目配置文件 package.json。

3、安装webpack

在工程文件路径下，执行 npm install webpack --save-dev //局部安装

4、目录结构如下

说明：

dist : 打包输出目录，只需部署这个目录到生产环境；

node_modules : npm安装的依赖包都在这里面；

src : 源代码；

entry.js : 入口js；

package.json : 项目配置信息；

webpack.config.js : webpack配置文件。

补充：我们在提交代码到 git 上去的时候，一般都会在 .gitignore 里指定忽略 node_modules 目录和里面的文件，这样其他人从 git 上拉下来的项目是没有 node_modules 目录的，这时我们需要运行

npm install

它会读取 package.json 中的 devDependencies 和 dependencies 字段，把记录的包的相应版本下载下来。

5、webpack打包

使用下面的命令打包，注意webpack4.xx打包命令需要加上 -o，

注：dist\js\bundle.js打包前不存在。

6、配置webpack.config.js

配置完成之后，只需要 webpack 命令就可以打包了，不需要再用步骤5里面的打包命令了。

7、打包css和图片文件

安装样式的loader：
npm install css-loader style-loader --save-dev

安装图片的loader
npm install file-loader url-loader --save-dev

在webpack.config.js中配置，如下：

在入口文件entry.js中import xx.css

然后执行 webpack 命令，就可以打包css文件了。

8、自动化构建工具webpack热加载实现---即webpack-dev-server

（1）安装
npm install webpack-dev-server --save-dev
（2）在终端（工程路径下）运行一段命令：

node_modules\.bin\webpack-dev-server(网上有的说直接输webpack-dev-server那是错的)

成功！输出的是这一段信息：

（3）配置webpack.config.js

不再需要使用相对路径找bundle.js文件了，直接src=”bundle.js”就可以(重要，一定要去掉路径)。

（4）再次执行node_modules\.bin\webpack-dev-server

（5）改变entry.js文件，每次保存时都会自动编译，不需要再打包了。

使用localhost:8080,即可访问index.html页面。