美文网首页
vue6

vue6

作者: 生活是什么呢 | 来源:发表于2017-11-29 10:45 被阅读0次

Webpack的配置和使用

安装

  1. 全局安装
npm install webpack -g
  1. 本地安装
npm install webpack -D

使用

直接通过命令参数来执行

  1. 如果是全局安装的
webpack 入口文件 出口文件
  1. 如果是本地安装的
    2.1 先在package.json的script标签中添加一条命令（就和全局的命令一模一样）
    2.2 通过npm run 命令名 来执行命令

通过配置文件来执行

如果是使用的配置文件，那么在使用webpack的命令的时候，就不需要再传递参数了！

配置文件名为 webpack.config.js, 这个文件一般被放在网站的根目录下

webpack.config.js是一个node.js的模块，所以里面的代码，就是nodejs代码，需要通过nodejs模块化的方式，将配置对象进行导出！

基础配置项

var path = require("path")

module.exports = {
    entry: path.join(__dirname, "入口文件路径"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    }
}

使用webpack打包别的类型的文件

webpack默认支持的文件类型，只有js文件，如果在项目中出现了其他类型的文件，那么webpack本身是无法进行处理的，所以我们需要为每一个类型的文件，单独指定一个加载器（loader）

css

在webpack的项目中，如果要使用css文件，我们可以将css文件当做一个模块，使用import的方式引入到js当中，最终webpack会将css文件中的内容，一起打包到最终的js文件中，也可以在页面中生效

要打包css文件，就需要给css文件配置loader，需要两个loader： style-loader css-loader

  1. 安装相应的loader
npm install style-loader css-loader -D
  1. 在webpack.config.js中配置css文件对应的loader
var path = require("path")

module.exports = {
    entry: path.join(__dirname, "入口文件路径"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    },
    //module属性中就可以进行loader的配置
    module: {
        rules: [
            {
                test: /\.css$/,
                //use中放的就是加载器的名称，要注意，调用的顺序是从后向前的
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

less sass

less需要的loader: style-loader css-loader less-loader 依赖项： less
sass需要的loader: style-loader css-loader sass-loader 依赖项： node-sass

  1. 安装相应的loader

    1.1 less-loader:

        npm install less-loader less -D

    1.2 sass-loader

        npm install sass-loader node-sass -D

  2. 配置加载器

var path = require("path")

module.exports = {
    entry: path.join(__dirname, "入口文件路径"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    },
    //module属性中就可以进行loader的配置
    module: {
        rules: [
            {
                test: /\.css$/,
                //use中放的就是加载器的名称，要注意，调用的顺序是从后向前的
                use: ["style-loader", "css-loader"]
            },
            {
                //less文件
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                //sass文件
                test:  /\.sass$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    }
}

图片 字体 打包

图片需要的loader: url-loader 依赖项： file-loader
字体需要的loader: url-loader

  1. 安装
npm install url-loader file-loader -D
  1. 配置
var path = require("path")

module.exports = {
    entry: path.join(__dirname, "入口文件路径"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    },
    //module属性中就可以进行loader的配置
    module: {
        rules: [
            {
                test: /\.css$/,
                //use中放的就是加载器的名称，要注意，调用的顺序是从后向前的
                use: ["style-loader", "css-loader"]
            },
            {
                //less文件
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                //sass文件
                test:  /\.sass$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                //图片文件
                test:  /\.(jpg|gif|png|jpeg|svg|bmp)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        //如果图片超过下面这个数据所标注的大小，那么图片将不会被转换成base64的格式，直接会将图片文件扔到dist目录里
                        limit: 1024 * 50
                    }
                }]
            },
            {
                //字体文件
                test: /\.(woff|woff2|eot|ttf)$/,
                use: ["url-loader"]
            }
        ]
    }
}

ES6 代码打包

用到的loader: babel-loader 依赖项： babel-core
用到转码规则： babel-preset-env

  1. 安装
npm install babel-loader babel-core -D

  1. 配置
    2.1 创建一个.babelrc 用来指定转码的规则

    {
    presets: [
        "env"
    ]
}

    2.2 webpack.config.js配置加载器

    var path = require("path")

module.exports = {
    entry: path.join(__dirname, "入口文件路径"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    },
    //module属性中就可以进行loader的配置
    module: {
        rules: [
            {
                test: /\.css$/,
                //use中放的就是加载器的名称，要注意，调用的顺序是从后向前的
                use: ["style-loader", "css-loader"]
            },
            {
                //less文件
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                //sass文件
                test:  /\.sass$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                //图片文件
                test:  /\.(jpg|gif|png|jpeg|svg|bmp)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        //如果图片超过下面这个数据所标注的大小，那么图片将不会被转换成base64的格式，直接会将图片文件扔到dist目录里
                        limit: 1024 * 50
                    }
                }]
            },
            {
                //字体文件
                test: /\.(woff|woff2|eot|ttf)$/,
                use: ["url-loader"]
            },
            {
                //ES6
                test: /\.js$/,
                //排除node_modules中的内容
                exclude: /node_modules/,
                use: ["babel-loader"]
            }
        ]
    }
}

html-webpack-plugin的使用

作用： 将src目录下的index.html作为模板，每次在打包的时候，都会将其复制到dist目录下，并且自动为其引入bundle.js

  1. 安装
npm install html-webpack-plugin -D
  1. 配置webpack.config.js
var HtmlWebpackPlugin = require("html-webpack-plugin")
var path = require("path")

module.exports = {
    entry: path.join(__dirname, "入口文件路径"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "src/index.html")
        })
    ]
}

webpack-dev-server的使用

如果没有这个东西，那么每次在修改代码之后，都需要重新进行打包，才能看到效果！

webpack-dev-server可以启动一个简易的http服务器，当代码发生改变的时候，实时的进行打包并且刷新页面显示效果！ 这个东西只会打包更新了的内容，并不会将整个项目完整的打包，所以效率会比较高，而且它打包的内容都是直接放在内存里面的，所以访问速率也会非常快

  1. 安装
npm install webpack-dev-server -D

  1. 使用

    2.1 直接给命令传参

    webpack-dev-server --port 9000 --contentBase ./src --hot

    2.2 在webpack.config.js中进行配置

    var path = require("path");

//如果使用webpack.config方式进行配置，那么必须有这个包引入
var webpack = reuqire("webpack");

module.exports = {
    entry: path.join(__dirname, "入口文件路径"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    },
    devServer: {
        port: 9999,
        contentBase: "./src",
        hot: true
    },
    plugins:[
        //这边是给dev-server设置一个插件，如果没有这个插件则热更新会报错
        new webpack.HotModuleReplacementPlugin()
    ]
}

babel-cli的使用

  1. 安装
npm install babel-cli -g
npm install babel-preset-env
  1. 配置
    创建.babelrc文件
{
    presets: [
        "env"
    ]
}
  1. 使用
babel 要转换的文件的路径 --out-file 输出的文件的路径

单文件组件

就是将组件相关的内容（HTML JS CSS）全部放到了一个.vue文件当中

<template>
    <div>
        //这里就是组件的html部分也就是所谓的模板
    </div>
</template>

<script>
    export default {
        data(){},
        filters: {},
        components: {},
        watch: {},
        directives: {},
        created(){}
    }
</script>

scoped属性标志着这个style标签中的css样式是只对当前组件有效！
<style scoped>
</style>

Vue-Cli

这是一个可以快速生成一个项目基本结构的vue工具

  1. 安装
npm install vue-cli -g
  1. 使用
vue init webpack 项目名称

在项目模板中写代码

  1. 创建组件！
  2. 配置路由！

项目模板的获取两种方式：

  1. 自己写的模板
    https://github.com/avakpan/vue-template

  2. vue-cli生成模板

相关文章

  • vue6

    Webpack的配置和使用 安装 全局安装 本地安装 使用 直接通过命令参数来执行 如果是全局安装的 如果是本地安...

  • 【Vue6】自定义事件

    本来这一章也觉得没有必要写的，但是看了一下，还是写一些吧，免得有些地方万一忘记了，还能回到这里来找找是因为什么原因出错。

网友评论

      本文标题：vue6

      本文链接：https://www.haomeiwen.com/subject/lpkubxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|vue6|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！