webapck从零搭建vue

需要安装到的一些依赖

1. js相关
   通过npm安装 @babel/core @babel/preset-env babel-loader @babel/polyfill
2. css相关
   css-loader
   style-loader
   node-sass
   sass-loader
   postcss-loader
   autoprefixer
3. webpack相关
   webpack
   webpack-cli
   webpack-dev-server
   webpack-merge
4. vue相关
   vue
   vue-loader
   vue-router
   vue-template-compiler
5. html相关
   html-webpack-plugin
6. 其他
   file-loader
   clean-webpack-plugin

上述的相关依赖安装完以后开始配置

这是我的文件目录

webpack.common.js是配置公共的webpack配置
webpack.dev.js是开发环境的配置
webpack.prod.js是生产环境的配置

src目录下是你工作写逻辑代码的地方
components存放组件的文件夹
css存放公共样式,images存放图片资源
main核心的入口文件

index.html是你的vue容器
package.json是配置脚本安装依赖的作用
postcss.config是配置css的一个js

我们在配置这些之前不妨先想一想,你要怎么去划分这些,比如我配置的这个vue的环境, 肯定有css js HTML
图片之类啥的,然后把这些划分成模块单独处理你会发现配置这些也就那几个东西(话不多说,直接上代码).

webpack配置

npm i webpack webpack-cli webpack-dev-server webpack-merge -D

webpack和webpack-cli就是处理你打包的核心依赖. 执行脚本的时候路径写对,

webpack-merge是合并webpack配置的依赖. 如上图导入merge方法,把配置通过参数传进去就会合并起来.

webpack-dev-server是搭建你本地服务器的依赖.里面的一些相关参数配置直接去看官网就行了,我这里就写了端口改变(port),自动打开(open),热更新的开启(hot).热更新这个点.我只是基础的使用一下.如需更好(懒)的配置自行去官网配置着玩.

配置js

默认webpack已经识别js了 ,但是对于一些es6以及更新的api是不识别的,所以需要自己配置.

npm i @babel/core @babel/preset-env babel-loader @babel/polyfill -D

安装好了依赖在module配置loader

这里的@babel/polyfill是不生效的,还得在main.js里导入一下 @babel/polyfill.

配置css

css的配置主要是解决浏览器的前缀和sass的识别

npm i css-loader style-loader node-sass sass-loader postcss-loader autoprefixer -D

importLoaders作用是在你解析css文件里导入其他sass的时候重新执行下面两个,因为webpack 是从下往上,从右往左执行的.
postcss-loader还得创建一个postcss.config.js来单独导入autoprefixer这个插件
在package.json那边配置一下需要兼容的浏览器

图片的配置

我是直接用file-loader处理的

npm i file-loader -D

这里需要注意的一点是vue的template使用图片的时候并不会展示成功, 原因是里面的url是一个对象模块,需要加水esModule设置为false就能展示出图片了.

html

npm i html-webpack-plugin -D

传一个解析html的路径就行了,我这里是使用node的path方法解析的路径.

清除打包之前的文件

npm i clean-webpack-plugin -D

直接new一下就行了,相当简单.最后的一块就是配置解析.vue文件的依赖了.

vue

npm i vue vue-loader vue-router vue-template-compiler -D

loader就直接配置vue-loader就完事了.就辣么的简单.

不~~~你还得引入vue的插件.

var VueLoaderPlugin = require(“vue-loader/lib/plugin”);

然后去运行一下你的项目,就能跑起来了

npm run dev

最后,你要是想省略一些文件的后缀名的话再去module配置一下,这样子你想在导入一些文件的时候可以不用写后缀名了. 简单明了