搭建webpack+vue环境

• 初始化项目

npm init

基本webpack配置

• 安装webpack webpack-cli webpack-dev-server

npm i --save-dev webpack webpack-dev-server webpack-cli

• 配置webpack.config.js

var path= require('path');
var webpack = require('webpack');
module.exports={
    entry: './src/index.js',
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:js/[name].[hash:8].js
    },
    mode:'development',
    rules:[]
    devServer:{
        contentBase:path.resolve(__dirname,'../dist/'),
        index:'./index.html',
        historyApiFallback:true,
        quiet:false,
        noInfo:false,
        hot:true,
        inline:true,
        lazy:false,
        progress:true,
        host:'127.0.0.1',
        port:'8081',
        proxy:{
            '/doc-api/':{
                target: 'http://localhost:8080',
                pathRewrite: {'^/doc-api' : ''},
                changeOrigin: true,
                secure: false
            }
        }
        
    }
}

配置babel

• 安装 babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-3 babel-runtime babel-plugin-syntax-dynamic-import

npm i --save-dev babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-3 babel-runtime babel-plugin-syntax-dynamic-import

module增加一条rules,并添加下面的代码

{
    test:/\.js$/,
    exclude:/node_modules/,
    use:{
        loader:'babel-loader',
        options:{
            presets:['es2015','stage-3'],
            plugins:['transform-runtime','syntax-dynamic']
        }
    }
}

在此我配置的是es2015和stage3,以下是相关说明,使用es2015会报过时,preset-env

babel-preset-es2015: 可以将es2015即es6的js代码编译为es5

babel-preset-es2016: 可以将es2016即es7的js代码编译为es6

babel-preset-es2017: 可以将es2017即es8的js代码编译为es7

babel-preset-stage-x: 可以将处于某一阶段的js语法编译为正式版本的js代码

stage-X: 指处于某一阶段的js语言提案。

提案共分为五个阶段：
stage-0: 稻草人-只是一个大胆的想法
stage-1: 提案-初步尝试
stage-2: 初稿-完成初步规范
stage-3: 候选-完成规范和浏览器初步实现

配置vue

• 安装vue vue-loader vue-hot-reload-api url-loader vue-template-compiler

npm i --save vue
//可合并

npm i --save-dev vue-loader
npm i --save-dev vue-hot-reload-api
npm i --save-dev vue-template-compiler
npm i --save-dev vue-loader

• 配置vue规则

rules:[
    {
        test:/\.vue$/,
        use:'vue-loader'
    }
]

• vue-loader从15.x之后都需要VueLoaderPlugins

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

plugins:[
    new VueLoaderPlugin()
]

配置css规则

• 安装 css-loader style-loader vue-style-loader
  css-loader用来解析css文件
  style-loader用来解析dom中的
  vue-style-loader是vue官方基于style-loader开发的,适用于vue样式解析
• 我们还可以使用插件来提取css ,webpack4建议使用mini-css-extract-plugin来提取css

npm install --save-dev mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
{
    test:/\.css$/,
    use:[
        {
            loader:MiniCssExtractPlugin.loader,
            options:{
                publicPath:'../' //特别重要，否则css文件打包后其中引用的图片文件不正确
            }
        },
        'css-loader'
    ]
}

new MiniCssExtractPlugin({
            filename:"css/.[name].[hash:8].css",
        }),

配置html规则

利用html-webpack-plugin插件构建html

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
    new HtmlWebpackPlugin({
        template:'./src/index.html',
        filename:'./index.html',
        hash:false,
        chunks:['index']
    })
]

配置图片处理规则

• 安装file-loader url-loader
• 图片规则

rules:[
{
    test:/\.()$/,
    use:[{
        loader:'url-loader',
        options:{
            name:'img/[name]:[hash:5].[ext]',
            limit:1024,//b
            publicPath:'../'
        }
    }]
}
]

工程文件路径

-src
--index.js
--index.html
--app.vue
-package.json
-webpack.config.js

相关文件

package.json

{
  "name": "start",
  "version": "1.0.0",
  "description": "instration",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --inline --inprogress --hot --open --history-api-fallback --config webpack.config.js --host 127.0.0.1 --port 8081"
  },
  "author": "xxx",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-peset-es2015": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-hot-reload-api": "^2.3.3",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }
}

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const vueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode: "development",
    entry: {
        index: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].[hash:8].js'
    },
    module: {
        rules: [

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'stage-3'],
                        plugins: ['transform-runtime', 'syntax-dynamic-import']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../' //  特别重要，否则css文件打包后其中引用的图片文件不正确
                        }
                    },
                    'css-loader'
                ]
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader',
                }

            },
            {
                test: /\.(png|jpg|gif|jpeg|svg|eot|woff|woff2|ttf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: 'img/.[name].[hash:5].[ext]',
                            limit: 1024,//b
                            publicPath: '../'
                        }
                    }
                ]
            },
            {
                test: /\.vue$/,
                use: 'vue-loader',

            }
        ]
    },

    plugins: [

        new MiniCssExtractPlugin({
            filename: "css/.[name].[hash:8].css",
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: './index.html',
            hash: false,
            chunks: ['index']
        }),
        new vueLoaderPlugin(),
        new webpack.ProvidePlugin({
            Vue: ['vue/dist/vue.esm.js', 'default'],
            VueRouter: ['vue-router/dist/vue-router.esm.js', 'default'],
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, "../dist/"),
        index: './index.html',
        historyApiFallback: true,
        quiet: false,
        noInfo: false,
        hot: true,
        inline: true,
        lazy: false,
        progress: true,
        host: '127.0.0.1',
        port: '8081',
        proxy: {
            '/doc-api': {
                target: 'http://localhost:8080',
                pathRewrite: { '^/doc-api': '' },
                changeOrigin: true,
                secure: false
            }
        }
    }

};

index.js

import App from './app.vue';
new Vue({
    el: '#app',
    components: { App },
})

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

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

</html>

app.vue

<template>
    <div>
        <span>asdsds</span>
    </div>
    
</template>


<script>
export default {
    naem:'app',

    data(){
        return {
            
        }
    }
}
</script>