使用webpack4.XXX这个版本，我们应该先做好以下的准备工作：
1、下载安装nrm npm i nrm -g
2、显示所有的仓储 nrm ls
3、切换仓储 nrm use XXX
4、安装全局的webpack4.XXX这个版本 npm i webpack -g
5、下载安装webpack4.XXX的默认依赖项 npm i webpack-cli -g
6、下载cnpm npm i cnpm -g
开始使用webpack构建前端项目
1、初始化项目 npm iniy -y
2、使用webpack处理源代码 webpack 源文件的路径 -o 输出文件的路径
3、下载第三方包所使用的命令 cnpm i 包名 [-g | -S | -D]
参数-g表示的是全局安装
参数-S表示的是项目运行时所要依赖的第三方工具
参数-D表示的是项目开发时所需要到的第三方工具
4、文件的基本配置
在项目的根目录下面创建一个名为webpack.config.js的文件
开始打包整理我们项目的基本架构
第一步：初始化命令：
npm init -y （生成package.json文件）
第二步：打包命令：
webpack 入口文件路径 -o 输出文件路径
注意：1、每次修改了的main.js文件需要重新打包，生成新的bundle.js文件，才能出来想要的效果 2、index.html页面中需要引入bundle.js文件的路径）
第三步：自动进行打包，需要安装一个webpack-dev-server，其命令为：
cnpm i webpack-dev-server -D
（注意：1、根据提示安装相应版本的webpack本地依赖，其命令为：cnpm i webpack@XXX -D
2、在根目录下面添加一个名为webpack.config.js文件）
webpack.config.js文件内容的书写：
const path = require('path')
module.exports = {
entry: path.join(__dirname, './src/main.js'), //入口文件
output: { //指定输出文件
path: path.join(__dirname, './dist'), //输出路径
filename: 'bundle.js' //指定输出文件的名称
}
}
经过这一步，便可以在终端输入命令：webpack ,就可以自动打包了
第四步：在package.json的脚本（scripts）中配置webpack-dev-server，即："dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
（注意：1、此时输入命令 npm run dev 会报错，需要根据错误的提示安装webpack-cli，命令为 cnpm i webpack-cli -D,再次运行 npm run dev即可运行成功
2、此时加载出来的页面还是会报错，原因是webpack-dev-server这个工具托管的为本目录，index.html 页面中引入的script标签路径错误，此时我们要用到另外一个工具html-webpack-plugin,它能帮我们自动把生成的bundle.js文件托管到内存中，页面的最底部，我们可以把index.html文件中自己写的路径给注释了）
第五步：安装html-webpack-plugin，命令为：
cnpm i html-webpack-plugin -D
配置文件（webpack.config.js）中添加：
const htmlWebpackPlugin=require('html-webpack-plugin')
plugins: [ //所有webpack插件的配置节点
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), //指定模板文件的路径
filename: 'index.html' //设置生成的内存页面的名称
})
]
第六步：css样式的引入，创建相应的index.css，并且在main.js文件中暴露一下，即：import ‘./css/index.css’（注意：此时会报错，原因是不会识别出.css的文件，需要安装别的工具）
第七步：安装style-loader和css-loader，命令为：
cnpm i style-loader css-loader -D
配置文件（webpack.config.js）中添加：
module: { //配置所有第三方loader模块的
rules: [ //第三方模块的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] } //处理css文件的loader
]
}
main.js文件中添加：
import './css/index.css'
第八步：安装less-loader和less,命令：
cnpm i less-loader less -D
在匹配规则中添加：
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //处理less文件的loader
第九步：安装sass-loader 和node-sass 的命令：
cnpm i sass-loader node-sass -D
在匹配规则中添加：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //处理scss文件的loader
在main.js中暴露这两个文件import './css/index.scss' 或者import './css/index.less'
第十步：安装url-loader 和file-loader
cnpm i url-loader file-loader -D
在配置文件中添加：
{ test: /\.jpg|png|gif|bmp|jpeg$/, use: 'url-loader' }, //处理图片路径的loader
第十一步：安装babel，可以解析ES6的新语法或者ES7的新语法，需要安装两套包，命令如下：
第一套：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
第二套：cnpm i babel-preset-env babel-preset-stage-0 -D
在配置文件（webpack.config.js）中添加如下配置规则：
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
在根目录下建立文件名为 .babelrc，配置这个文件，（注意：这个文件为JSON格式，所以必须符合json语法规则，例如：不能写注释，字符串必须用双引号等），内容如下：
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
第十二步：导入vue，其命令为：
cnpm i vue -S
在main.js文件中添加
var vm = new Vue({
el: '#app',
data: {
msg: '123'
}
})
暴露该文件的第一种方式：在main.js中添加：import Vue from '../node_modules/vue/dist/vue'
第二种方式：在main.js中添加：import Vue from 'vue'
在配置文件（webpack.config.js）中添加（注意：与module和plugins平级）：
resolve:{
alias:{//修改vue被导入时候报的路径
"vue$":"vue/dist/vue.js"
}
}
创建一个login.vue的文件，这里面放的是组建
在main.js中导入组件：import login from './login.vue'
（注意：由于默认的webpack 无法打包 .vue 文件，需要安装 相关的loader）
第十三步：安装vue-loader 和 vue-template-compiler -D
cnpm i vue-loader vue-template-compiler -D
在main.js中添加：
var vm = new Vue({
el: '#app',
data: {
msg: '123'
},
render:function(createElement){
return createElement(login);
}
})
在webpack.config.js 中添加:
const VueLoaderPlugin = require('vue-loader/lib/plugin')
plugins中添加：new VueLoaderPlugin()
第十四步：安装路由命令：
cnpm i vue-router -S
// 1、导入vue-router包
import VueRouter from 'vue-router'
// 2、手动安装 VueRouter
Vue.use(VueRouter)
相信大家认真读过此篇文章之后，可以搭建出最基础的一个架构！若有疑问和写的不太恰当的地方，欢迎指出。