Vue爬坑笔记之七(用webpack搭建Vue)

149

总结

初始化项目

  • 在项目目录中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