webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
1.新创建一个React的文件夹，里面新建一个webpack的配置文件
image.png
2.添加入口entry和出口output
image.png
3.创建一个src的文件夹，里面创建一个index.js，即入口文件
image.png
4.新建一个index.html，引入输出的js文件
image.png
5.安装依赖测试webpack
首先安装全局的webpack（@3代表webpack3版本）：
cnpm / npm i webpack@3 -g
然后安装局部的项目依赖：
cnpm / npm i webpack@3 -D
安装之后，会出现node_modules和package.json文件
image.png
6.在入口文件中写js代码：
image.png
然后在命令行输入webpack打包命令：
image.png
文件目录中会生成dist文件夹，内部会有输出文件app.js
image.png
然后在浏览器中运行index.html：
image.png
说明webpack最基本配置成功。
7.插件
7.1压缩js的插件
webpack打包后生成的app.js文件，压缩之前：
image.png
我们先引入webpack的模块，然后使用压缩js的插件，最后再打包一次（会自动覆盖掉上一次打包内容）：
image.png
压缩成功：
image.png
7.1复制html并且自动引入js的插件
（1）将index.html中引入js的代码注释掉
装一个自动引入的插件：
cnpm / npm i html-webpack-plugin -D
（2）在webpack.config.js中先引入这个插件，然后使用
完成后重新打包下：
（3）此时dist目录下生成了一个index.html文件，并且是引入了app.js的
8.解析器
8.1样式文件
（1）处理css文件
在src文件夹中写一个main.css文件
然后在index.js中引入这个css文件，然后去打包，报错了，显示解析不了
先安装解析css的模块：
cnpm / npm i style-loader css-loader@0 -D
在webpack.config.js配置解析器：
image.png
刷新页面，successful！
（2）处理scss文件
同上，写一个scss文件并引入，然后安装解析scss的模块：
cnpm / npm i node-sass sass-loader -D
在webpack.config.js配置解析器：
image.png
刷新页面，successful！
（3）处理less文件
同上，写一个less文件并引入，然后安装解析less的模块：
cnpm / npm i less less-loader -D
在webpack.config.js配置解析器：
image.png
刷新页面，successful！
（4）处理stylus文件
同上，写一个stylus文件并引入，然后安装解析stylus的模块：
cnpm / npm i stylus stylus-loader -D
在webpack.config.js配置解析器：
image.png
刷新页面，successful！
8.2 js文件
其实最重要的就是解析js的高级语法，让他可以在浏览器中访问，安装解析js的模块：
cnpm / npm i babel-core@6 babel-loader@7 -D
在webpack.config.js配置解析器：
image.png
由于babel可能没有js更新的快，所以我们需要安装相应的模块并且配置：
cnpm / npm i babel-preset-env -D
根目录下创建一个配置文件 .babelrc
image.png
后续如果需要使用react，也需要预设：
cnpm / npm i babel-preset-react -D
image.png
8.3 图片文件、字体文件、媒体文件
首先在index.js中打开引入的main.css，然后在main.css中引入背景图：
image.png
image.png
安装解析图片文件的模块：
cnpm / npm i file-loader url-loader -D
在webpack.config.js配置解析器：
image.png
重新打包后，生成的图片路径以及命名由上图粉色部分配置决定
image.png
刷新页面，successful！
字体文件和媒体文件不需再装模块，直接配置即可：
image.png
9.webpack的开发服务器（热替换/自动更新）
先将出口文件生成的文件夹dist删除，生成服务器后访问的端口就自动会有我们的页面
然后安装webpack-dev-server模块：
cnpm / npm i webpack-dev-server@2 -g
cnpm / npm i webpack-dev-server@2 -D
启动服务器：
webpack-dev-server
会出现默认端口为8080的页面
现在，改变代码并保存页面上就实时更新，所以我们就叫热替换/自动更新！
10.反向代理解决跨域
先安装个axios请求数据的模块：
cnpm i axios -S
配置反向代理：
image.png
请求数据的接口是哪个网站，target写的就是哪个网站，然后将请求数据中的网站地址改为已经配置的 /api
image.png
配置文件更改代码后，要重启服务器，然后跨域解决！
11.配置端口号、启动服务器后自动打开项目、局域网代理
image.png
自动打开项目不建议配置，每次更改配置文件，就又重新打开了一个页面，有点麻烦。。。
12.配置启动命令
在package.json中修改：
image.png
cnpm / npm run dev （开启服务器 ---- 用于开发阶段）
cnpm / npm run build （打包)
13.配置@指向src目录下的文件以及文件省略后缀
image.png
配置完成后，引入src目录下的文件就不用写./了，直接@即可：
image.png
image.png
基本结束，拜拜~
网友评论