总结
初始化项目
- 在项目目录中init出自己的package.json文件
- npm init (npm init -y) -y的结果是不用敲enter一路选择默认的值
安装依赖
- 安装webpack
npm install webpack --save-dev
- 安装webpack-cli
npm install webpack-cli --save-dev
package.json
- 要运行build或者dev命令,要在package.json中添加脚本
- package.json的
"scripts"
中
scripts:{
"build":"webpack --mode production",//生产模式
"dev":"webpack --mode development"//开发模式
}
创建你的文件目录
- 创建好src文件夹,在里面创建router、views、component、assets等文件夹
配置webpack.config.js
- 这个文件与vue.config.js文件并不冲突,二者也有许多相同之处,但个别配置会有冲突
let path = require('path')//引入path
//主机和端口
module.exports = {
entry:['./src/main.js']//项目主入口文件
output:{//输出配置
path:path.resolve(__dirname,'./dist'),//输出路径
publicPath:'./'//devServer访问路径,只写./是相对地址,__dirname + '/dist/'是绝对地址,推荐使用相对地址
feilname:''//打包后的文件名
},
devServer:{//启动一个服务器
contentBase:path.join(__dirname,'dist'),//服务器目录
publicPath:'/',
historyApiFallback:true,//遇到404时重定向到index.html
overlay:true,//将错误显示在html上
host:'0.0.0.0',//主机
port:'8080',//端口号
hot:true,//热刷新
inline:true,//内联模式
noinfo:false//只保留错误警告
}
}
安装第三方的框架
- 第三方模块需要在webpack.config.js中引入
- 例如:
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
- 例如:
- 清除旧dist文件夹重新产生新的dist文件夹 (clean-webpack-plugin)
npm install clean-webpack-plugin --save-dev
- 在webpack.config.js中引入后,在plugins配置中实例化:
new CleanWebpackPlugin()
- 自动生成html文件的(html-webpack-plugin)
npm install html-webpack-plugin --save-dev
- 需要在webpack.config.js的plugins中添加配置:
plugins:[ new HtmlWebpackPlugin({ title:'生成的html文件的title', minify:{ //生成html文件时的配置 removeComments:true //移除注释 collapseWhitespace:true //移除空白符和换行 minifyCSS:true //压缩内联CSS }, filename:'生成的html文件名', template:'根据此地址的文件为模板生成新的html文件' }) ]
- es6转译es5的依赖 babel
npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime --save-dev
- babel的运行环境:
npm i @babel/polyfill @babel/runtime --save
- 在项目的根目录中创建.babelrc文件 再文件中写入
{ "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-transform-runtime"] }
- babel要在webpack.config.js中的module写入转译规则:
module:{ rules:[ { test:'/\.js$/',//编译js必须加引号. exclude:'/node_modules/' //忽略node_modules文件夹 use:{ loader:'babel-loader' } } ] }
安装vue
- 命令 npm install vue --save
- 在主入口文件(你在webpack.config.js中entry中写入的文件)中导入vue
- 在主入口js文件中 实例化vue对象
new Vue({
el: '挂载点',
render: h => h(App) //App 为项目的根组件
})
- 在html文件中 把挂载点写上
- 在html body中写入
- 以上代码需要依赖vue-loader
- vue-loader 需要依赖一个vue的插件 vue-template-compiler
- 安装命令
npm install vue-loader --save-dev
npm install vue-template-compiler --save-dev
- 在webpack.config.js文件中加入以下配置
plugins: [
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/,//不需要引号
loader: 'vue-loader'
}
]
}
- 在src文件夹下创建自己存放vue文件的文件夹以views为例
- 在views文件夹下创建vue文件 以home.vue为例
安装vue-router
- 命令
npm install vue-router --save
- 在src文件夹下创建router文件夹
- 在router文件夹中穿件index.js 文件
- 在js文件中写入以下代码
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: () => import ('../views/home.vue')
}
]
var router = new VueRouter({
routes
})
export default router
- 在入口js文件中引入router
import router from './router/index.js'
- 将router写在vue的实例化对象中
参考与借鉴:24个实例入门并掌握webpack4