vue2+webpack4搭建项目

时间 2019-11-15

标签 vue2+webpack4 vue webpack 搭建项目繁體版

原文原文链接

用了好几回vue-cli，仍是决定手工搭建一个vue2+webpack4项目
1.为了可拓展性
2.vue.config.js真是用的不开心
3.对webpack4和vue2的合做了解的更多
本文代码的git地址 github.com/shaohuanhua…
参考的 www.jianshu.com/p/6ff34032a…
前面几步基本同样,为了更易理解，文件命名和位置作了改动，更接近vue-cli3
javascript

一，初级构建

新建一个imitateCli文件夹，打开终端开始构建
css

npm init
复制代码

安装框架所需基本：
html

npm i webpack vue vue-loader -D
复制代码

(vue-loader：解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理)
vue

npm i webpack-cli -s -d  (webpack4 已经开始使用webpack-cli)<br>
npm i css-loader vue-template-compiler -D<br>
复制代码

（css-loader：加载由 vue-loader 提取出的 CSS 代码。）
（vue-template-compiler：把 vue-loader 提取出的 HTML 模版编译成对应的可执行的 JavaScript 代码）
而后咱们在src目录下面新建一个app.vue文件，里面就能够写一些关于项目的业务代码：
java

<template>
    <div> luckfine </div>
</template>
<script> export default { data () { //text: 'luckfine' } } </script>
<style> </style>
复制代码

后缀为.vue 文件是不能够在浏览器里直接运行的，咱们得让它运行起来。
如今咱们要在项目根目录下新建一个webpack.config.js文件，webpack（号称打包一切）它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
咱们在src目录下新建一个main.js做为入口文件，顺便在里面写点东西：
node

// main.js
import Vue from 'vue'
import App from './app.vue'

const root = document.createElement('div')
document.body.appendChild(root)

new Vue({
    render: (h) => h(App)
}).$mount(root)
复制代码

main.js准备完毕以后，那么在webpack.config.js里面就能够这样写：
webpack

// webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry:  path.join(__dirname, 'src/main.js'),
    mode:'develop',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin()
    ],
}
复制代码

webpack把全部的文件打包成一个bundle.js文件，而且是能在浏览器里面直接运行的代码。
如今咱们能够在package.json 文件里的scripts对象里面添加一个脚本：
(注意：webpack4中已经在启动时用mode指定启动环境)
git

"scripts": {
    "build": "webpack --config webpack.config.js --mode=development"
  },
复制代码

添加完这段以后，咱们再去terminal执行下npm run build,会发现build成功
github

三，启动项目

为了本地能启动咱们的项目，咱们能够安装一个devServerweb

npm install webpack-dev-server -s -d
npm install html-webpack-plugin -d -s
复制代码

此时的webpack.config.js

// webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    entry:  path.join(__dirname, 'src/main.js'),
    mode: 'develop',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin()
    ],
    devServer: {
        historyApiFallback: {
          index: `/dist/index.html`
        },
        host: '0.0.0.0',
        port: '8014',
        disableHostCheck: true
    }
}
复制代码

package.json中添加启动入口

"dev": "webpack-dev-server --inline --hot --mode=development",
复制代码

此时咱们在terminal执行npm run dev
便可看到他自动给咱们建立了一个index.html,把打包好的js插入进里面，且项目已经能够运行

0.0.0.0:8014 或者 localhost:8014

devServer应该默认hot:true的吧

四：加入经常使用vue拓展

引入vue-router

npm install vue-router -d -s
复制代码

// main.js
import VueRouter from 'vue-router'
import router from './router' // 路由单独放个文件
Vue.use(VueRouter)
...
new Vue({
    router, // 全局引入
    render: (h) => h(App)
}).$mount(root)

复制代码

习惯用index.html作载体，能够额外放第三方插件啥的

建文件public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>cli demo</title>
  </head>
  <body>
    <noscript>
      <strong>不支持script</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
复制代码

// main.js
import Vue from 'vue'
import App from './app.vue'

import VueRouter from 'vue-router'
import router from './router' 

Vue.use(VueRouter)

// const root = document.createElement('div')
// document.body.appendChild(root)

new Vue({
    router,
    render: (h) => h(App)
}).$mount('#app')
复制代码

<!--App.vue-->
<template>
    <div> <!--这个元素及其子元素会把index.html里的#app替换掉 -->
        <router-view></router-view> <!--路由匹配的组件在此-->
    </div>
</template>
<script> export default { name: 'App', data () { return {} } } </script>
复制代码

// router.js
import Router from 'vue-router'
// import navList from '@/router/nav.config.json' 
// 也能够把路由写成个json，供多处使用
const findPwd = () => import('../views/login/find_pwd.vue') // 懒加载，须要webpack配置动态import
const routes = [{
        path: '/find_pwd',
        component: findPwd,
        name: '找回密码'
    }]
export default new Router({
  routes
})
复制代码

这就能经过路由访问了 http://localhost:8014/#/find_pwd

区分开发和生产环境配置webpack

1.新建一个文件夹build,放入3个webpack配置文件代替webpack.config.js，以下

build --webpack.base.conf.js
     |--webpack.dev.config.js
     |--webpack.prod.config.js
复制代码

在webpack.base.conf.js
公共配置，包括对.vue, .css, .scss, 图片，字体处理的loader，babel转码，css代码提取，入口文件处理
在webpack.dev.config.js
配置devServer,eslint,html模板处理，output处理
webpack.prod.config.js
打包压缩文件，splitChunks代码分割提取，html模板处理，output处理, 代码分析

process.env的NODE_ENV，由图5设置

记录剩余要加的
style-loader 实现了HMR接口，可是这里style-loader用mini-css-extract-plugin，因此这里css热加载不行
加个postCss
加tree-shaking配置
改成多入口

2.修改包描述文件的命令

"scripts": {
    "build": "webpack --config build/webpack.prod.conf.js",
    "dev": "webpack-dev-server --config build/webpack.dev.conf.js --inline --hot"
  },
复制代码

用npm run build 虽然能打包成功，可是运行时报错，说没找到Vue。
我打开依赖包里的vue，发现主入口是dist/vue.runtime.common.js(运行版vue)，
如图6, 由于vue-loader+render才能用运行版，后面再优化
index.html里的BASE_URL?

先用完整版的vue
因此改了main.js里的引入

import Vue from '../node_modules/vue/dist/vue.js'
复制代码

果真打包的静态文件也能够运行了我还没写完