webpack使用教程

一·首先你需要安装node.js,然后在命令行切换到项目指定的目录,执行安装webpack命令:

npm install webpack -g

二·安装webpakc相关插件,配置vue.js运行环境:

npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev
npm install html-webpack-plugin --save-dev
npm install vue --save

webpack-dev-server: webpack-dev-server是一款小型的Node.js Express服务器,我们使用它主要是为了实现代码的热重载,具体使用方法可参见webpack-dev-server使用方法,看完还不会的来找我~
vue-loader/vue-html-loader/css-loader/vue-style-loader…: webpack中loader的作用不多讲,用法看文档
vue-hot-reload-api: vue-hot-reload-api顾名思义,亦为实现vue热重载
此时package.json中的devDependencies和dependencies应该是这样的:

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^5.8.38",
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.2.1",
    "style-loader": "^0.18.2",
    "vue": "^2.4.4",
    "vue-hot-reload-api": "^2.1.1",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.5",
    "vue-style-loader": "^3.0.3",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "dependencies": {
    "vue": "^2.4.4"
  }

建立文件目录:

dist: 存放生成的文件
src: 存放编辑的文件模板等
components: 存放components组件

src/index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
<div id="test">
    <Hello></Hello>
</div>
</body>
</html>

src/js/index.js

import Vue from 'vue';
import Hello from "../components/Hello.vue";

new Vue({
    el: "#test",
    template: '<Hello/>',
    components: { Hello }
})

src/components/Hello.vue

<template>
    <div>{{msg}}</div>
</template>

<script>
    export default {
        data () {
            return {
                msg: 'Hello World!'
            }
        }
    }
</script>

<style>
    html {
        background: green;
        color: #fff;
        font-size: 20px;
    }
</style>

webpack.config.js

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, './src/js/index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: './js/[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query:{
                  presets: 'es2015'  
                },
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
            hash: true
        })
    ]
}

命令行运行webpack命令, 此时在dist文件目录下分别生成了js/index.js和index.html,在页面中打开index.html发现页面有报错: [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 这是因为此时使用的是vue.runtime.common.js,这里可以阅读以下官方文档中的独立构建VS运行时构建;简单理解就是独立构建可以自己将字符串模板(template)编译为渲染函数(render),然后再运行时再调用编译好的渲染函数,而运行时构建是在Vue2开始后,为了实现在服务端渲染,不依赖与浏览器端的DOM接口,而不允许使用template模板,因此运行时构建比独立构建要小,但是不能使用template模板,而官方文档中也有说明。npm包中导出的默认是运行时构建。如果希望使用独立构建,可以添加以下代码:

webpack中
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

这句话是添加到webpack.config.js中的,当然,我们也可以打开node_modules/vue/package.json文件,将其中的main指向”dist/vue.runtime.common.js”改为’vue/dist/vue.common.js’。

此时再重新运行webpack命令,可能还会报错: Cannot find module ‘vue-template-compiler’ ,此时在命令行中运行npm install vue-template-compiler即可。
在运行webpack命令,在浏览器中打开dist/index.html文件就可以看到代码完美运行了。我们只需要在src/下修改我们的Hello.vue或者是index.js以及index.html文件,然后运行webpack然后刷新页面即可看到代码的改动效果。
当然,我们期待的是只修改代码,不用重新运行webpack命令,甚至不需要刷新浏览器即看到代码的改动效果,这时候需要新的插件来配置实现vue的热重载。

三·安装jquery组件:

npm install jquery --save-dev

使用jquery方法,入口js中引入一个js,jquery写法格式如下:

import $ from 'jquery';
$('h1').html('It is true babel');

四·安装css样式插件:

npm install css-loader style-loader

添加module配置:

module: {

        loaders: [

            {

                test: /\.css$/,

                loader: "style!css"

            }

        ]

  }

最后在入口js文件里包含css样式表即可!

require('../css/style.css');

五·webpack命令行操作命令:
webpack执行文件过程顺序:

webpack --display-reasons

线上部署的时候执行优化和文件压缩:

webpack -p

实时监控文件修改:

webpack -w

六·安装webpack实时调试环境:(webpack-dev-server)

npm install webpack-dev-server -g

使用开发者模式:

webpack-dev-server --progress --colors
0
如无特殊说明,文章均为本站原创,转载请注明出处
  • 转载请注明来源:webpack使用教程
  • 本文永久链接地址:http://www.mobanw.com/html-js/vue-js/161.html

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到