zoukankan      html  css  js  c++  java
  • 使用 webpack 4 配置 Vue.js 项目


    一、Webpack 4 的基本安装  
     
    执行控制台命令的两个方法:
    方法一:在 Windows资源管理器中创建并进入文件夹后,按键盘 Shift + 鼠标右键,选择
    “在此处打开 PowerShell 窗口”(Win 10)或 “在此处打开命令窗口”(Win 7),即可在
    打开的窗口执行命令
    方法二:在 Windows资源管理器中创建文件夹,启动 WebStorm后打开该文件夹,点窗口左
    下方的 Terminal(中文意思 是终端,用来执行命令的),即可执行命令。
     
     
    1、创建项目文件:webpack-demo
    mkdir webpack-demo  
    cd webpack-demo
     
    2、NPM 初始化项目package.json,进入项目文件夹,并在命令提示符下执行命令:
    npm init  
    或者全部使用默认值:
    npm init -y
     
    3、在本地安装 webpack 和 webpack-cli
    npm install webpack webpack-cli --save-dev
     
    4、在项目中创建index.html、文件夹 ./src 和 JS 文件 ./src/index.js,如下:
      webpack-demo
      |- package.json
    + |- index.html
    + |- /src
    +   |- index.js
     
    编辑文件 src/index.js
    console.log("Hello World!");
     
    5、打包 js 文件,执行构建命令:
    D:webpack-demo>npx webpack
     
    屏幕输出类似如下信息:
    Hash: de6f43f472db75a3678e
    Version: webpack 4.21.0
    Time: 360ms
    Built at: 2018-10-21 15:41:12
      Asset       Size  Chunks             Chunk Names
    main.js  957 bytes       0  [emitted]  main
    Entrypoint main = main.js [0] ./src/index.js 28 bytes {0} [built]
     
    命令执行成功后在,在项目中会添加一个 dist文件夹,以及 dist/mian.js 文件
     
    6、编辑index.html文件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Webpack 4 demo</title>     
    </head>
    <body>
     
    <script src="dist/main.js"></script>
    </body>
    </html>
     
    保存,用浏览器打开该文件,F12 打开浏览器控制台检查是否有输出结果。
     
    使用一个配置文件
     
    在 webpack 4 中,可以无须任何配置使用,默认的入口是 src/index.js,默认的出
    口是:dist/main.js,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然
    要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多,所以让我们创
    建一个 webpack.config.js 取代以上使用 CLI 选项方式的配置文件,内容如下所示:
    path = require('path');
     
    module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'main.js',
            path: path.resolve(__dirname, 'dist')
        }
    };
     
     
    使用 NPM 脚本执行构建命令
    考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便,我们可以设置一个快捷方
    式。在 package.json 添加一个 npm 脚本(npm script):
    {
      "name": "webpack-demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",     "build": "webpack"         // 添加这一行
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.21.0",
        "webpack-cli": "^3.1.2"
      }
    }
     
    现在,可以使用 npm run build 命令,来替代我们之前使用的 npx 命令。
    D:webpack-demo>npm run build
     
    > webpack-demo@1.0.0 build D:webpack-demo
    > webpack
    Hash: 49dbf2f0376708b5b0d8
    Version: webpack 4.21.0
    Time: 102ms
    Built at: 2018-10-21 15:54:47
      Asset       Size  Chunks             Chunk Names
    main.js  957 bytes       0  [emitted]  main
    Entrypoint main = main.js
    [0] ./src/index.js 28 bytes {0} [built]
     
    二、最小的 Vue.js 配置
    1、安装生产阶段依赖模块和开发阶段依赖模块
    npm install --save vue
     
    2、修改webpack.config.js 文件
    const path = require('path');
     
    module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'main.js',
            path: path.resolve(__dirname, 'dist')
        },
        resolve: {
            extensions: [
                '.js'
            ],
            alias: {
                vue: 'vue/dist/vue.js'
            }     }
    };
     
    3、修改index.html文件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Webpack 4 demo</title>
    </head>
    <body>
    <div id="app">
        {{message}}
    </div>
    <script src="dist/main.js"></script>
    </body>
    </html>
     
    4、修改index.js文件
    import Vue from 'vue';
     
    var vue = new Vue({
        el: '#app',
        data: {
            message: 'Hello World'
        }
    });
     
    6、执行构建命令: npm run build
    D:webpack-demo>npm run build
     
    > webpack-demo@1.0.0 build D:webpack-demo
    > webpack
     
    Hash: 0d271c85cebc3d506967
    Version: webpack 4.21.0
    Time: 2740ms
    Built at: 2018-10-21 16:25:18
      Asset     Size  Chunks             Chunk Names
    main.js  109 KiB       0  [emitted]  main
    Entrypoint main = main.js
    [0] (webpack)/buildin/global.js 509 bytes {0} [built]
    [2] ./src/index.js 121 bytes {0} [built]
        + 4 hidden modules
     
    7、在浏览器打开index.html 文件,检查运行结果 三、单文件组件与 vue-loader  
    1、安装开发阶段的依赖(使用Babel 6)
    npm install --save-dev  vue-loader vue-template-compiler babel-core
    babel-loader babel-preset-env
     
    npm install --save-dev @babel/core @babel/cli @babel/preset-env
     
    安装 polyfill(生产阶段依赖,用于对 IE 浏览器等提供 ES2015+ 环境的支持)
    npm install --save @babel/polyfill
     
    安装后,package.json 文件内容如以下所示:
    {
      "name": "webpack-demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build": "webpack"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@babel/cli": "^7.1.2",
        "@babel/core": "^7.1.2",
        "@babel/preset-env": "^7.1.0",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.4",
        "babel-preset-env": "^1.7.0",
        "vue-loader": "^15.4.2",
        "vue-template-compiler": "^2.5.17",
        "webpack": "^4.21.0",
        "webpack-cli": "^3.1.2"
      },
      "dependencies": {
        "@babel/polyfill": "^7.0.0",
        "vue": "^2.5.17"
      }
    }
     
    2、在项目中添加文件 .babelrc,内容如下:
    {
      "presets": [
        [
          "env",       {
            "targets": {
              "browsers": ["last 2 versions", "IE 11"]
            },
            "modules": false,
            "useBuiltIns": true
          }
        ]
      ]
    }
     
    3、修改webpack.config.js 文件,内容如下所示:
    const path = require('path');
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
     
     
    module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'main.js',
            path: path.resolve(__dirname, 'dist')
        },
        // 模块
        module: {
            rules: [
                {
                    test:/.vue$/,
                    use:[
                        {
                            loader: "vue-loader",
                        },
                    ]
                },
                {
                    /* 用 babel来解析 js文件并把 es6 的语法转换成浏览器认识的语法
    */
                    test:/.js$/,
                    /* 排除模块安装目录的文件 */
                    exclude:/node_modules/,
                    use:[
                        {
                            loader:'babel-loader',
                        },
                    ]
                }
            ]     },
        resolve: {
            modules:[path.join(__dirname,'src'),'node_modules'],
            extensions: [
                '.js','.vue'
            ],
            //给vue 配置别名,import 引入不用写易长串
            alias: {
                // vue: 'vue/dist/vue.js'
                'vue$':'vue/dist/vue.esm.js'
            }
        },
        //插件,用于生产模板和各项功能
        plugins: [
            new VueLoaderPlugin()
        ],
    };
     
    4、修改 index.html,内容如以下所示:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Webpack 4 demo</title>
    </head>
    <body>
    <div id="app">
    Loading...
    </div>
    <script src="dist/main.js"></script>
    </body>
    </html>
     
    5、修改./src/index.js 文件如以下内容:
    import Vue from 'vue';
    import App from './app.vue';
     
    var vue = new Vue({
        el: '#app',
        render: h => h(App)
    });
     
    6、添加单文件组件文件./src/app.vue,src 文件夹上右键 -> new -> Vue Component,
    内容如以下所示:
    <template>
        <div id="app">         {{msg}}
        </div>
    </template>
     
    <script>
        export default {
            name: "app",
            data:function () {
                return{
                    msg:'welcome to your vue.js App'
                }
            }
        }
    </script>
     
    <style scoped>
     
    </style>
     
    7、执行构建命令:npm run build
    D:webpack-demo>npm run build
     
    > webpack-demo@1.0.0 build D:webpack-demo
    > webpack
     
    Hash: c23b2f56ea24497d680a
    Version: webpack 4.21.0
    Time: 1482ms
    Built at: 2018-10-21 18:13:39
      Asset      Size  Chunks             Chunk Names
    main.js  91.5 KiB       0  [emitted]  main
    Entrypoint main = main.js
    [0] ./node_modules/vue-loader/lib??vue-loader-
    options!./src/app.vue?vue&type=style&index=0&id=5ef48958&scoped=true&lang
    =css& 19 bytes {0} [built]
    [1] (webpack)/buildin/global.js 509 bytes {0} [built]
    [6] ./src/app.vue?vue&type=style&index=0&id=5ef48958&scoped=true&lang=css
    & 312 bytes {0} [built]
    [7] ./src/index.js + 6 modules 4.86 KiB {0} [built]
        | ./src/index.js 143 bytes [built]
        | ./src/app.vue 1.14 KiB [built]
        | ./src/app.vue?vue&type=template&id=5ef48958&scoped=true& 207 bytes
    [built]
        | ./src/app.vue?vue&type=script&lang=js& 332 bytes [built]
        | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-
    loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=template
    &id=5ef48958&scoped=true& 291 bytes [built]
        | ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-
    loader-options!./src/app.vue?vue&type=script&lang=js& 142 bytes [built]
        |     + 1 hidden module
        + 4 hidden modules
     
    8、在浏览器中运行index.html 文件,检查结果。
     
    四、使用 webpack-dev-server构建本地服务器
    1、安装webpack-dev-server、html-webpack-plugin 到开发阶段依赖
    npm install --save-dev webpack-dev-server html-webpack-plugin
     
    2、修改webpack.config.js 文件
    在开头添加webpack 和 html-webpack-plugin 引用
    const webpack = require('webpack');
    const HtmlWebPackPlugin = require('html-webpack-plugin');
     
    在 module.exports内添加以下两个小节
    //插件,用于生产模板和各项功能
    plugins: [
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebPackPlugin({
            template: 'index.html',
            inject: true,
        }),
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress:true,
        historyApiFallback: true,
        inline: true,
        hot: true
    },
     
    3、修改package.json 文件,在"scripts"小节内添加 "start" 行,如下所示
    "scripts": {
      "test": "echo "Error: no test specified" && exit 1",
      "build": "webpack --mode development",
      "start": "webpack-dev-server --inline"   // 添加这一行
    },
     
    4、在命令提示符或WebStorm 的终端中输入以下命令即可启动本地调试服务器:
    npm run start
     D:webpack-demo>npm run start
     
    > webpack-demo@1.0.0 start D:webpack-demo
    > webpack-dev-server --inline
     
    i 「wds」: Project is running at http://localhost:8080/
    i 「wds」: webpack output is served from /
    i 「wds」: Content not from webpack is served from D:webpack-demodist
    i 「wds」: 404s will fallback to /index.html
    i 「wdm」: Hash: 65e7921c6a791f244a0f
    Version: webpack 4.21.0
    Time: 2300ms
    Built at: 2018-10-24 20:44:57
         Asset       Size  Chunks             Chunk Names
       main.js   1010 KiB    main  [emitted]  main
     0.main.js   17.4 KiB       0  [emitted]
    index.html  271 bytes          [emitted]
     
     
    本地调试服务器启动后,在浏览器的地址栏输入:http://localhost:8080/,即可查看项
    目运行的结果,同时服务器会监控各个页面的修改并反馈到网页中。
     
    五、在 Vue.js中使用Bootstrap(这里只使用 CSS)进行
    1、添加Bootstrap 4 到生产阶段依赖
    npm install bootstrap -S
     
    2、安装处理CSS的加载器到开发阶段依赖
    npm i style-loader css-loader -D
     
    3、修改webpack.config.js 文件,在module 的rules小节中添加以下内容:
    {
        test:/.css$/,
        use:['style-loader','css-loader'],
    }
     
    4、在入口的index.js 文件中添加css 的引用
    import Vue from 'vue';
    import App from './app';
    import 'bootstrap/dist/css/bootstrap.css';  // 添加样式文件的引用
     
    Vue.config.productionTip = false;  // 作用是阻止 vue 在启动时生成生产提示 var vue = new Vue({
        el: '#app',
        render: h => h(App)
    }).$mount('#app');
     
    完成以上设置后,即可使用 bootstrap 样式了。
     
    六、使用前端路由vue-router
    1、安装vue-router 到生产阶段依赖
    npm install vue-router -S
     
    2、在src文件夹中新建 component 文件夹,
    3、在component文件夹中添加单文件组件home.vue,内容如下所示:
    <template>
        <div>This is home vue</div>
    </template>
     
    <script>
        export default {
            name: "home"
        }
    </script>
     
    <style scoped>
     
    </style>
     
    4、在component文件夹中添加单文件组件about.vue,内容如下所示
    <template>
        <div>关于页面。</div>
    </template>
     
    <script>
        export default {
            name: "about"
        }
    </script>
     
    <style scoped>
     
    </style>
     
    5、添加路由信息文件src/router.js,内容如以下所示:
    import Vue from 'vue';
    import Router from 'vue-router';
    import Home from './component/home.vue';  
    Vue.use(Router);
    export default new Router({
        base: process.env.BASE_URL,
        // 下面这个单词要注意,是 routes(没有 r), 不是 routers
        routes: [
            {path: '/', name: 'home', component: Home},
            {path: '/about', name: 'about', component: (resolve) =>
    require(['./component/about.vue'], resolve)}
        ]
    });
     
    6、修改src/index.js 文件,
    import Vue from 'vue';
    import App from './app';
    import router from 'router'      // 导入上一步的路由信息
    import 'bootstrap/dist/css/bootstrap.css';
     
    Vue.config.productionTip = false;  // 作用是阻止 vue 在启动时生成生产提示
    var vue = new Vue({
        el: '#app',
        router: router,      // 指定路由
        render: h => h(App)
    }).$mount('#app');
     
     
    7、修改app.vue 文件,如以下内容所示:
    <template>
        <div id="app" class="container">
            <div class="row">
                <div id="nav" class="col-3">
                    <ul>
                        <li>
                            <router-link to='/'>Home</router-link>
                        </li>
                        <li>
                            <router-link to='/about'>About</router-link>
                        </li>
                    </ul>
                </div>
                <div class="col-9">
                    <router-view/>
                </div>
            </div>
        </div>
    </template>  
    <script>
        export default {
            name: "app",
        }
    </script>
     
    <style scoped>
     
    </style>
     
    8、启动本地调试服务器
    npm run start
     
    9、在浏览器中输入地址:http://localhost:8080,查看运行结果
     
    说明:
    1、使用vue-router 的时候需要webpack-dev-server 的支持,不然地址栏无法进行路由
    的匹配;
    2、vue-router默认的路由会在地址栏中显示有一个 # 的符号,这个是因为使用的是hash
    mode,如果要去掉#/,改成 history模式就可以了,具体配置在router 中添加一行 mode:
    'history', 如下:
    import Vue from 'vue';
    import Router from 'vue-router';
    import Home from './component/home.vue';
     
    Vue.use(Router);
    export default new Router({
        mode: 'history',     // history 模式
        base: process.env.BASE_URL,
        // 下面这个单词要注意,是 routes(没有 r), 不是 routers
        routes: [
            {path: '/', name: 'home', component: Home},
            {path: '/about', name: 'about', component: (resolve) =>
    require(['./component/about.vue'], resolve)}     ]
    });
     
     
     
     
     
     
     
     
     
     
     
     
     
     

  • 相关阅读:
    HTML DOM 12 表格排序
    HTML DOM 10 常用场景
    HTML DOM 10 插入节点
    HTML DOM 09 替换节点
    HTML DOM 08 删除节点
    HTML DOM 07 创建节点
    022 注释
    024 数字类型
    005 基于面向对象设计一个简单的游戏
    021 花式赋值
  • 原文地址:https://www.cnblogs.com/mahidol/p/9846421.html
Copyright © 2011-2022 走看看