【 Vue全家桶 · Vue CLI（一）】快速入门Vue.js标准开发工具 —— Vue CLI 4.0

本文链接：https://blog.youkuaiyun.com/JZevin/article/details/108587688

文章目录

一. webpack开发 VS CLI开发

在这里插入图片描述

1.1 webpack开发的痛点

webpack无疑是最优秀的项目构建工具，大而全的功能确实能满足我们绝大部分的需求，但它同样存在问题：

① 项目整体目录结构仍需要我们手动创建；
每次项目都需要我们手动创建目录结构，这种简单低级的劳动，完全可以用更高效的模板代替。

在这里插入图片描述

② 绝大部分loader和plugins都需要安装并配置；
通常稍复杂一些的项目里配置webpack文件往往就会花费很多时间。对于我们初学者来说高度可配置的webpack可谓是不太友好，很难写出定义良好，性能优化的配置。

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   
    entry:__dirname + '/src/js/main.js',
    output:{
   
        path:__dirname + '/dist',
        filename:'bundle.js'
    },
    module: {
   
        rules: [
            {
   
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']