1:配置webpack
1:新建一个vue项目:
进入目录,在终端创建:
vue create 项目名;
2:创建新文件
对应的文件目录src下新建存放css文件index.css,项目的入口文件main.js以及vue模板app.vue
3:安装项目基本依赖:
npm i webpack webpack-cli -D
查看webpack版本:npm webpack -v
4:进行项目搭建,
在项目总目录下创建index.html
./dist/main.js是打包后的目标文件
5:配置打包环境
webpack.config.js中首要的就是配置入口文件,将src下的main.js作为打包的入口文件,而打包后的结果存放就放在index.js中所引用到的dist中
webpack基础配置
const path=require("path")
module.exports={
//入口文件
entry:"./src/main.js",
//出口文件
output:{
path:path.join(__dirname,"dist"),
filename:"main.js"
},
//模式
mode:"development"
plugin:[],
module:{
rules:[]
}
}
6:loader
webpack本身是没有处理vue文件的能力,所以在webpack.config.js中配置对应的loader,
解析vue文件:
vue3的项目,对应的vue-loader版本是16.0.0-beta.4
npm i [email protected] -D
@vue/compiler-sfc:
npm i @vue/compiler-sfc -D
解析css文件:
下载css-loader,style-loader
npm i style-loader css-loader -D
解析less文件
less-loader:用于加载.less文件,将less转化为css
npm i less-loader -D
其他:
loader和webpack配置
webpack 打包
webpack-cli webpack命令行接口
vue-loader 把vue文件后缀编译
vue-template-compiler vue模板的编译
sass-loader 将sass文件转成css代码
css-loader 将css文件编译
style-loader 将模板中的style标签下的css进行编译
babel-loader 高级语法的兼容性问题
@babel/core babel的核心库
@babel/preset-env 兼容最新语法
安装:
npm i -D webpack webpack-cli vue-loader vue-template-compiler sass-loader sass css-loader style-loader babel-loader @babel/core @babel/preset-env
7:plugin
plugin 插件功能是 webpack 的支柱功能,主要是为了解决 loader 无法实现的其他情况,例如 HtmlWebpackPlugin 插件会在打包完成后自动生成一个 html 文件并且引入对应的 bundle 。
npm install --save-dev html-webpack-plugin
8:在webpack的module中做相应的配置
// 用于激活webpack的加载项和插件
const path = require('path');
module.exports = {
entry: 入口文件,
output: {
path