webpack搭建vue环境

npm init -y
cnpm i webpack webpack-cli -D
cnpm i webpack-dev-server -D
cnpm i vue -S
cnpm i html-webpack-plugin -D

创建src/index.html , src/main.js , webpack.config.js，修改package.json文件
// src/App.vue

package.json

{
  "scripts": {
    "dev": "webpack-dev-server"
  },
}

index.html

<div id="app"></div>

main.js

import Vue from 'vue';

new Vue({
    el: '#app',
    render: {
        template: '<div>hello</div>'
    }
});

webpack.config.js

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

const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/main.html'),
    filename: 'index.html'
});
module.exports = {
    mode: "development",
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm.js',
        }
    },
    devServer: {
        open: true,
        port: 5000,
    },
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, 'distSrc'),
        filename: 'main.js'
    },
    plugins: [htmlPlugin]
};

$webpack 生成对应的文件
$npm run dev 启动监听

安装识别.vue及识别css的文件

cnpm i css-loader style-loader -D  //不安装这个，则.vue的style无法识别

cnpm i vue-loader -D
cnpm i vue-loader-plugin -D //vue-loader的使用都是需要伴生 VueLoaderPlugin的
cnpm i vue-template-compiler -D

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: "development",
    plugins: [new VueLoaderPlugin()],
    module: {
        rules: [
            {test: /\.vue$/, loader: 'vue-loader'},
            {test: /\.css/, loader: ['style-loader', 'css-loader']},
        ]
    },
};

main.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    render: h => h(App)
});

安装less

cnpm i less less-loader -D

module.exports = {
    module: {
        rules: [
            {test: /\.less/, loader: ['style-loader', 'css-loader','less-loader']},
        ]
    },
};

<style lang="less">
    @primary-color: yellow;
    .box {
        h1 {
            color: @primary-color;
        }
    }
</style>

在生产环境中打开

$webpack编译

http-server distSrc/