vue 分模块打包 脚手架_手动撸一个webpack4脚手架(仿vuecli2)

其实vue的脚手架是真的多，vue的nuxt脚手架的，vue的webpack脚手架的，还有各种gitHub上的后台管理系统模板的。。。。。

而vue-cli2的webpack模板，这个相信是大多数人最为熟悉的模板了。现在再去安装官网上模板的话，已经基于vue-cli3安装的了。

为了巩固webpack配置的知识，自己决定再手动撸一遍vue-cli2脚手架的配置。

01

新建一个空文件夹，命名demo，用vscode打开

02 新建src文件夹，在下面新建App.vue

*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 template , script 和 style。这三个部分分别代表了 html,js,css。

但是浏览器本身并不认识.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader。还需要css-loader,vue-template-compiler

<template>
    <div>
        <h3>this is a login componenth3>
    div>
template>
<script>export default {
}script>
<style lang="css">h3{color:skyblue;
    }style>

03 在项目根目录新建main.js,将App.vue挂载到vue实例上

import Vue from 'vue'
import App from './src/App.vue'
import './src/assest/css/global.css'
const div1=document.createElement('div')
document.body.appendChild(div1)
new Vue({
    //el:'#app',
    render: h => h(App)
}).$mount(div1)
//一直报错can not find element '#app',毕竟创建了div根节点而已

04 在项目根目录下新建webpack.config.js，作为webpack打包的配置

webpakc官网入口有个基础入口出口配置，传送门https://www.webpackjs.com/

简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出,其核心配置文件就是webpack.config.js

const path=require('path')//node的
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports={
    target:'web',//
    entry:path.resolve(__dirname,'main.js'),//打包指定文件为main.js
    output:{
        path:path.resolve(__dirname,'dist'),//打包输出路径为根目录的dist文件夹
        filename:"[name].js"//name是chunk的通配符，可以理解为就是入口文件名。本例打包出来的文件为：main.js
    },
    module:{
        //webpack只认识.js，对于其他文件需要配置响应的loader来解析
        rules:[
           {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                test:/\.css$/,
                loader:'css-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 1024,
                  name: '[name].[hash:7].[ext]'
                }
              },
              {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 10000,
                  name:'fonts/[name].[hash:7].[ext]'
                }
            }
        ]
    },
    plugins: [
        // vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
        new VueLoaderPlugin()
    ],
}

05 npm安装所需loader

在终端输入npm init -y

会看到根目录下生成package.json,还有package-lock.json(用以记录当前状态下实际安装的各个npm package的具体来源和版本号。)

npm i webpack vue-loader css-loader vue-template-compiler url-loader file-loader -D 

npm i vue -S

06 然后就行了？？no

打开package.json,增加自定义build命名

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  }

最后在终端，输入npm run build可以看到成功打包。

打开dist目录下的main.js,可以看到打包后的内容：

07 后续

为了能在浏览器显示，我们来安装webpack-dev-server来模拟一个服务器环境

npm i webpack-dev-server cross-env
---------------------------------------------------
 "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
 "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

npm run dev,打开localhost:3000

结果如下，mian.js并不能展现网页布局在浏览器上

这时候需要在配置文件中加上htmlwebpackplugin,该插件将为你生成一个 HTML5 文件:打包输出文件夹dist/index.html

这时候需要在配置文件中加上htmlwebpackplugin,该插件将为你生成一个 HTML5 文件:打包输出文件夹dist/index.html

npm install --save-dev html-webpack-plugin
------------------------------------
plugins: [new HtmlWebpackPlugin()]

再次打开localhost:3000

注意css样式没有起作用，增加style-loader

style-loader:配合css-loader使用，以形式在html页面中插入css代码

    {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },

大功告成！

在打包的时候有没有发现npm run dev与npm run build的区别：

webpack-dev-server，生成文件的都是在内存里，而npm run build生成文件是显示在硬盘目录里的，毕竟build里面是webpack命令。

感谢阅读！