从零开始开发一个简易的类vue-cli构建工具

时间 2019-11-18

标签开始开发一个简易 vue cli 构建工具繁體版

原文原文链接

代码地址：https://github.com/cheer4chai/webpack-learningjavascript

仿照vue-cli开发这个工具的目的是了解webpack的基本设置，以及vue-cli的工做原理css

Series1.简单的打包构建功能

webpack的配置很简单： html

设置好入口文件：entry，输出文件：outputvue

// webpack.config.js


module.exports = {
    entry: {
        bundle1: './main1.js',
        bundle2: './main2.js'
    },
    output: {
        filename: '[name].js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }]
    }
}

最终文件目录：　java

咱们发现webpack把main1.js和main2.js分别打包为了bundle1和bundle2，main.css也打包到了bundle文件中，这样咱们就初步打包成功了。node

Series2.使用loader将less/css文件打包

若是在webpack中须要将less/css等一些非js文件打包至目标文件时，咱们就须要用到webpack的特性之一：loaderjquery

其实只要在webpack的配置文件中加入module字段就能够了，代码以下webpack

let path = require('path')
let webpack = require('webpack');


module.exports = {
    entry: './src/entry.js',
    devtool: 'inline-source-map',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    devServer: {
        contentBase: path.join(__dirname, "./"),
        hot: true,
    },
    module: {
        loaders: [{
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            }
        ]
    }
}

　　另外值得一提的是loader是从右到左的链式操做，如上的css文件，是先通过css-loader处理，再通过style-loader处理，才能转化为所须要的打包格式git

Series3.使用webpack-dev-server在线浏览效果

当使用vue-cli的时候咱们会想，当运行npm run dev的时候他是怎么生成一个本地的文件的呢，其实就是用了webpack-dev-server这一个插件，在本地用nodejs生成了一个服务器，代理了在内存中自动生成的静态页面。话很少说，安装了这个插件以后（yarn add webpack-dev-server），只要在项目目录下执行webpack-dev-server命令，访问本地localhost:8080就能够看到这个页面了。github

可是这个时候当咱们修改了一个文件以后还须要从新用webpack编译，再刷新页面再能看到更改内容，那么有什么能够解决这个问题吗？没错，这个时候咱们就须要热重载插件：HotModuleReplacementPlugin。其实也很简单，只要在webpack的plugins内加入这个组件，另外在devServer中配置hot为true（或者运行的时候执行--hot命令），就能够实现热重载了。

还须要一提的是HtmlWebpackPlugin插件，这个插件能够自动生成一个HTML文件，vue-cli最终的html文件就是该文件生成的，所以咱们还须要这个插件去自动生成一个html文件引用output的js文件，并打开

让咱们来看一下如何配置这几个东西：

let path = require('path')
let webpack = require('webpack');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/entry.js',
    devtool: 'inline-source-map',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devServer: {
        hot: true,
        compress: true,
        publicPath: '/'
    },
    module: {
        loaders: [{
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 热加载
        new HtmlWebpackPlugin(),
    ]
}

　　文件目录以下：

在根目录下运行webpack-dev-server，咱们就能够在本地看到已经打包后的页面了

Series4.使用webpack-merge分别设置webpack的dev及prod模式

由于在平常开发中，咱们每每会须要开发和生产两种环境，而这两个环境的webpack配置有相同的地方，又有不一样的地方，这个时候咱们须要用的webpack-merge来将wepack的配置分红两个模式，相似于vue-cli那样，分为三个文件：base/dev/build，分别保存共用设置、开发用设置和生产设置。

文件以下：

//webpack.base.config
let path = require('path')

module.exports = {
    entry: {
        index: './src/main.js'
    },
    devtool: 'inline-source-map',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        loaders: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            }, {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            }
        ]
    }
}

//webpack.dev.config
let path = require('path')
let webpack = require('webpack');
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.config')
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(baseWebpackConfig, {

    devServer: {
        hot: true,
        compress: true,
        publicPath: '/'
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 热加载
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ]
})

在生产模式中，为了能够生成更小的文件，已经实现js的按需引用，咱们配置webpack的CommonsChunkPlugin以及UglifyJsPlugin，其中chunk能够将页面中引用的第三方库单独打包，而uglify顾名思义，则是压缩代码须要的插件，详细的配置以下：

//webpack.build.config
let path = require('path')
let webpack = require('webpack');
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.config')

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

module.exports = merge(baseWebpackConfig, {
    entry: {
        index: './src/main.js',
        vendor: ['jquery', 'vue']
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: path.join('static', 'js/[name].[chunkhash].js'),
        chunkFilename: path.join('static', 'js/[id].[chunkhash].js')
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: false,
            parallel: true
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                    // more options:
                    // https://github.com/kangax/html-minifier#options-quick-reference
            },
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'ventor',
            minChunks: Infinity
        })
    ]
})

　　目录结构以下图：

Series4.配置vue文件编译

当咱们须要向vue-cli同样，将vue都编译成最终的js文件的时候，咱们须要一个新的loader:vue-loader，另外为了让webpack能够引入template，咱们还须要在webpack中配置resolve字段

改动的代码以下：

//webpack.dev.config
let path = require('path')
let webpack = require('webpack');
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.config')
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(baseWebpackConfig, {

    devServer: {
        hot: true,
        compress: true,
        publicPath: '/'
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 热加载
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ]
})

//webpack.build.config
let path = require('path')
let webpack = require('webpack');
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.config')

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

module.exports = merge(baseWebpackConfig, {
    entry: {
        index: './src/main.js',
        vendor: ['jquery', 'vue']
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: path.join('static', 'js/[name].[chunkhash].js'),
        chunkFilename: path.join('static', 'js/[id].[chunkhash].js')
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: false,
            parallel: true
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                    // more options:
                    // https://github.com/kangax/html-minifier#options-quick-reference
            },
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'ventor',
            minChunks: Infinity
        })
    ]
})

项目目录以下图：

如图，咱们已经实现了一个简单的类vue-cli构建工具。详细的代码能够去个人github看：https://github.com/cheer4chai/webpack-learning，若是能帮助到你，烦请点个star~