webpack项目搭建步骤

总结

第一步

• 创建自己的项目目录
• 在项目目录中init出自己的package.json文件
• npm init (npm init -y) -y的结果是不用敲enter一路选择默认的值

第二步

• 安装webpack
• 命令 npm install webpack --save-dev
• 安装webpack-cli
• 命令 npm install webpack-cli --save-dev

安装第三方的框架

• 清除dist文件夹重新产生的dist文件的框架 （clean-webpack-plugin）
• 命令 npm install clean-webpack-plugin --save-dev
• 生成html文件的框架（html-webpack-plugin）
• 命令 npm install html-webpack-plugin --save-dev
• 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"]
}

安装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的实例化对象中