1,创建项目

1, npm init 初始化  -> 会在项目目录生成一个package.js

2, 安装webpack  命令 npm install webpack

这样项目就搭建好了, 接下来完成一些配置

2,配置

1, 在项目根目录创建文件 webpack.config.js, webpack的配置在这里面完成

2,webpack.config.js基础配置说明

entry: 文件入口,   output 文件出口

3,html-webpack-plugin插件配置

安装 npm install html-webpack-plugin

引入

使用

参数可以自己配置

我的html-webpack-plugin配置

4,mini-css-extract-plugin配置, 完成css的抽离,不再在js里混合了

webpack4以后,css的 extract-text-webpack-plugi 弃用 改用了 mini-css-extract-plugin

安装 npm install mini-css-extract-plugin    没加-d 或者-g默认为局部安装

引入文件

使用loader, 有了这个loader 可以不用装style-loader

4, css的处理 -css-loader , 预编译处理 sass

安装这3个包-不会的就复制粘贴, 然后 npm i

使用

这样你就可以使用自己的css的预处理器scss了

5,配置es6 => es5   很多低版本的浏览器是不支持es6语法的 所以需要手动转换

安装babel-loader

使用

6, 配置url路径别名

通过 resolve下的alias配置

需要引入 var path = require('path');

7, 完成server 反向代理配置

ajax请求中, 前缀加个/api

webpack.config中

复制这代码过去

端口,自动更新,自动打开    代理则在proxy中: 如果有以/api开头的路径 就会转发到target路径, ^/api:'' 会把api这个无用的字符串变为空字符,

好了 简单的webpack配置完成了, 如果你遇到安装或者别的报错 欢迎留言, 一只手帮你解决