41.手工使用webpack创建vue项目

作者: 圆梦人生 | 来源:发表于2018-11-20 17:16 被阅读2次

41.手工使用webpack创建vue项目
webpack相关
Vue创建多页面应用
用Vue开发通用组件（含vuex）并发布到npm
vue 使用预编译器 sass
使用MuseUI创建你的第一个单页面应用
给你的MuseUI应用添加字体、样式
5.vue单页应用
vue-cli2.0 和 vue-cli3.0的区别
vue搭建脚手架出现问题Command vue init re

1、在磁盘中创建项目： D:\vue\webpackvue2 并使用命令行进入
2、初始化项目生成package.json，运行命令：

npm init

image.png

3、本地局部安装webpack （--save-dev 会作为开发依赖来安装webpack，注意webpack版本为4.X）

     命令：  npm install webpack --save-dev

4、安装webpack-dev-server，它可以在开发环境中提供很多服务，比如启动一个服务器、热更新、接口代理等

    命令： npm install webpack-dev-server --save-dev

5、安装webpack-cli(webpack 4.X必须安装 webpack-cli)

    命令： npm install webpack-cli --save-dev

6、工程下创建一个js 文件： build/webpack.config.js （webpack配置文件）

// webpack配置
var config = {
    
}
// 等同于exprot default {},只因这里还没有es6
module.exports = config

7、在package.json中的scripts增加一个启动脚本：

"script" : {
        "dev": "webpack-dev-server --open --config build/webpack.config.js"
    ...

image.png

8、启动项目查看：

 命令：npm run dev

image.png

9、在工程下面建立src目录并创建main.js

改动webpack.config.js

//
var path = require('path');
// webpack配置
var config = {
    // 入口
    entry: {
        // 配置的单入口
        main: './src/main.js'
    },
    // 出口(打包后的文件会存储为demo/dist/main.js 文件)
    output: {
        // 选项用来存放打包后文件的输出目录(必填项)
        path: path.join(__dirname, './dist'),
        // 指定资文件引用的目录
        publicPath: '/dist/',
        // 指定输出文件的名称
        filename: 'main.js'
    }
}
// 等同于exprot default {},只因这里还没有es6
module.exports = config

11、工程下建立index.html作为SPA入口

<!DOCTYPE HTML>
    <html>
        <head>
            <title> </title>
            <meta charset="utf-8" />
        </head>
        <body>
            <div id="app">
                hello world
            </div>
            <script type="text/javascript" src="/dist/main.js"></script>
        </body>
    </html>

12、控制台停止，重新 npm run dev

image.png

13、在webpack.config.js增加对css处理需要先安装css loader

    npm install css-loader --save-dev
    npm install style-loader --save-dev

webpack.config.js 改动

//
var path = require('path');
// webpack配置
var config = {
    // 入口
    entry: {
        // 配置的单入口
        main: './src/main.js'
    },
    // 出口(打包后的文件会存储为demo/dist/main.js 文件)
    output: {
        // 选项用来存放打包后文件的输出目录(必填项)
        path: path.join(__dirname, './dist'),
        // 指定资文件引用的目录
        publicPath: '/dist/',
        // 指定输出文件的名称
        filename: 'main.js'
    },
    // module
    module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                }
            ]
        }
}
// 等同于exprot default {},只因这里还没有es6
module.exports = config

14、在src/建立style.css，并在main.js中导入
style.css

body {
    background: red;
}

main.js

import './style.css'

image.png

15、上面导入样式会直接生成<style></style>代码段，需要安装webpack 插件 (css提取到公共文件中)，webpack4.X 要加上@next

命令： npm install extract-text-webpack-plugin@next --save-dev

16、提取css到公共文件,webpack.config.js 改写

//
var path = require('path');
// 导入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// webpack配置
var config = {
    // 入口
    entry: {
        // 配置的单入口
        main: './src/main.js'
    },
    // 出口(打包后的文件会存储为demo/dist/main.js 文件)
    output: {
        // 选项用来存放打包后文件的输出目录(必填项)
        path: path.join(__dirname, './dist'),
        // 指定资文件引用的目录
        publicPath: '/dist/',
        // 指定输出文件的名称
        filename: 'main.js'
    },
    // module
    module: {
            rules: [
                {
                    test: /\.css$/,
                    /*use: [
                        'style-loader',
                        'css-loader'
                    ]*/
                    use: ExtractTextPlugin.extract({
                        use: 'css-loader',
                        fallback: 'style-loader'
                    })
                }
            ]
    },
    // 插件
    plugins: [
        // 重新命名提取后css文件
        new ExtractTextPlugin("main.css")
    ]
}
// 等同于exprot default {},只因这里还没有es6
module.exports = config

index.js 添加:

<link rel="stylesheet" type="text/css" href="/dist/main.css" />

image.png

17、webpack安装vue插件(使用. vue 文件需要先安装vue-loader 、vue-style-loader 等加载器并做配置。因为要使用ES6 语法，还需要安装babel 和babel-loader 等加载器)

  npm install --save vue
  npm install --save-dev vue-loader
  npm install --save-dev vue-style-loader
  npm install --save-dev vue-template-compiler
  npm install --save-dev vue-hot-reload-api
  npm install --save-dev babel
  npm install --save-dev babel-loader 
  npm install --save-dev @babel/core
  npm install --save-dev babel-plugin-transform-runtime
  npm install --save-dev babel-preset-es2015
  npm install --save-dev babel-runtime

18、安装完成后修改webpack.config.js来支持对vue及es6的解析

//
var path = require('path');
// 导入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// 导入vueLoader
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// webpack配置
var config = {
    // 入口
    entry: {
        // 配置的单入口
        main: './src/main.js'
    },
    // 出口(打包后的文件会存储为demo/dist/main.js 文件)
    output: {
        // 选项用来存放打包后文件的输出目录(必填项)
        path: path.join(__dirname, './dist'),
        // 指定资文件引用的目录
        publicPath: '/dist/',
        // 指定输出文件的名称
        filename: 'main.js'
    },
    // module
    module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: 'vue-loader'
                },
                {
                    test: /\.js$/,
                    use: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    /*use: [
                        'style-loader',
                        'css-loader'
                    ]*/
                    use: ExtractTextPlugin.extract({
                        use: 'css-loader',
                        fallback: 'style-loader'
                    })
                }
            ]
    },
    // 插件
    plugins: [
        // 重新命名提取后css文件
        new ExtractTextPlugin("main.css"),
        new VueLoaderPlugin()
    ]
}
// 等同于exprot default {},只因这里还没有es6
module.exports = config

19、项目根目录下创建 .babelrc 文件

{
    "presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ]
}

20、在src创建App.vue，即：src/App.vue

<template>
    <div class="message">
        {{message}}
    </div>
</template>
<script>
    export default {
        data(){
            return {
                message: 'hello Vue'
            }
        }
    }
</script>
<style>
.message {
    border: 1px solid red;
}
</style>

21、更改src/main.js

// app入口
// import './style.css'
// 导入vue框架
import Vue from 'vue'
// 导入app.vue
import App from './App.vue'
// 创建vue实例
new Vue({
    el: '#app',
    render: h => h(App)
})

22、npm run dev 查看