一周精通Vue(三)webpack、代码抽离

简介: vue、webpack、webpack打包、webpack核心、webpack配置、webpack配置文件、webpackloader如何配置、vue代码抽离过程、.js文件如何转为.vue文件

webpack

webcpak的核心有两个
一个是模块化 让我们可以进行模块化开发,并且会帮助我们处理模块之间的依赖关系
一个是打包  不仅仅是JavaScript文集 我们的css,图片,json文件等 在webpack中都可以被当做模块来使用

node -v 首先安装node 我这里安装的是10.15.3
# 全局安装webpack
npm install webpack@3.6.0 -g
# 安装项目依赖
npm install webpack@3.6.0 -save-dev 
webpack -version  # 查看webpack版本
  • 打包

    在终端运行webpack命令时 都是使用全局的webpack
    如果使用项目webpack 需要配置devDependencies
# webpack 命令打包指定文件  如果有依赖则自动继承依赖打包
webpack ./src/main.js ./dist/bundle.js  
  • 配置
创建一个 webpack.config.js
npm init # 初始化package.json配置文件 自动生成package.json文件
npm install # 安装package 自动生成 package-lock.json

// file: webpack.config.js

const path = require('path');

module.exports = {
    // 打包入口文件
    entry: './src/main.js',
    // 出口文件
    output: {
        // 出口文件绝对路径
        path: path.resolve(__dirname, './dist'),
        // 打包后的文件名字
        filename: 'bundle.js'
    }
};

loader

官方链接:https://webpack.js.org/loaders
  • css样式文件

# 1. 安装loader
npm install --save-dev css-loader
npm install --save-dev style-loader
const path = require('path');

module.exports = {
    // 打包入口文件
    entry: './src/main.js',
    // 出口文件
    output: {
        // 出口文件绝对路径
        path: path.resolve(__dirname, './dist'),
        // 打包后的文件名字
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // css-loader 只负责将css文件加载
                // style-loader 负责将样式添加到dom中
                // 这里配置顺序需要注意 是从后向前加载的
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
};
  • less 样式文件
    安装 less-loader
    npm install --save-dev less-loader less
  • img 图片文件
    安装 url-loader
    npm install --save-dev url-loader

    安装 file-loader
    npm install --save-dev file-loader

  • ES6 -> ES5 语法处理
    安装babel-loader
    npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置Vue

  • 安装vue 添加运行时依赖
    npm install vue --save
  • new Vue
// 使用vue进行开发
import Vue from 'vue'

const vm = new Vue({
    el: "#app",
    data: {
        msg: "Vue message!",
    },
    methods: {}
});

修改HTML

<div id="app">
    {{msg}}
</div>
  • runtime-orly

    没有template功能  代码中 不能包含任何的template内容
    
  • runtime-compiler

    拥有template 代码中可使用 template代码内容
    
  • 解决runtime-orly报错

    指定runtime版本
    
  • 配置webpack.config.js
    resolve: {
        alias: {
            // 指定 在其他地方导入vue的时候 vue来自哪里
            // 在node_modules/vue/dist/ 中 默认是 vue.runtime.esm.js 修改为 vue.esm.js
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
  • el 和template的区别

    如果在Vue实例中写了 el 又写了template 那么 template会替换掉el挂载的元素
    
  • 安装 vue-loader
    开发依赖
    npm install vue-loader vue-template-compiler --save-dev

代码抽离


src
├── css
│   ├── narmal.css
│   └── special.less
├── img
│   ├── Ink\ Cloud.jpg
│   └── timg.jpeg
├── js
│   └── demo.js
├── main.js
└── vue
│   ├── App.vue
│   └── Cpn.vue
│
└── index.html
│
└── package.json
│
└── webpack.config.js
│
└── dist
│
└── node_modules
// file:webpack.config.js
// 配置 loader

const path = require('path');

module.exports = {
    // 打包入口文件
    entry: './src/main.js',
    // 出口文件
    output: {
        // 出口文件绝对路径
        path: path.resolve(__dirname, './dist'),
        // 打包后的文件名字
        filename: 'bundle.js',
        // 打包时动态修改文件加载地址
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // css-loader 只负责将css文件加载
                // style-loader 负责将样式添加到dom中
                // 这里配置顺序需要注意 是从后向前加载的
                use: ['style-loader', 'css-loader'],
            },

            {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    },

                    {
                        loader: "css-loader" // translates CSS into CommonJS
                    },

                    {
                        loader: "less-loader" // compiles Less to CSS
                    }
                ]
            },

            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 当加载图片时  文件大小 小于limit时 会将图片编译成base64字符串形式
                            // 当加载图片时  文件大小 大于limit时 需要使用file-loader模块进行加载
                            limit: 9999,
                            // 打包后文件的命名规则
                            // [name] 文件打包前的名字
                            // [hash:8] 截取8位hash值
                            // [ext] 扩展名
                            name: 'img/[name].[hash:8].[ext]'
                        },

                    }
                ]
            },

            {
                test: /\.js$/,
                // exclude 转换的时候排除的内容
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },

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

    resolve: {
        alias: {
            // 指定 在其他地方导入vue的时候 vue来自哪里
            // 在node_modules/vue/dist/ 中 默认是 vue.runtime.esm.js 修改为 vue.esm.js
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
};
file:main.js

// 依赖js文件
import {name, age} from "./js/demo";

console.log(name);
console.log(age);

console.log('webpack package test!!!!!!!!1');

// 依赖css文件
require("./css/narmal.css");

// 依赖less文件
require("./css/special.less")

document.write("<h1>前端谢广坤!</h1>")

// 使用vue进行开发
// 导入vue
import Vue from 'vue'
// 依赖vue组件  .vue文件
import App from './vue/App.vue'

const vm = new Vue({
    el: "#app",
    template: "<App/>",
    components: {
        App
    },

    methods: {}
});
file: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

<script src="./dist/bundle.js"></script>
</body>
</html>

file: App.vue

<template>
    <div>
        <h2>my name is cpn </h2>
        <button @click="butClick">按钮</button>
        <h2>{{name}}</h2>
        <Cpn></Cpn>
    </div>
</template>

<script>
    import Cpn from './Cpn.vue'

    export default {
        name: "App",
        components: {
            Cpn
        },
        data() {
            return {
                message: 'Hello word!',
                name: 'coder why'
            }
        }
    }
</script>

<style scoped>

</style>

file:Cpn.vue

<template>
    <h1>大写的Cpn</h1>
</template>

<script>
    export default {
        name: "Cpn"
    }
</script>

<style scoped>

</style>
相关文章
|
2月前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
74 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
3月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
141 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
4月前
|
前端开发 JavaScript API
|
4月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
50 0
|
4月前
|
JavaScript 测试技术
在不同 webpack 版本的 Vue 项目中配置 Storybook
在不同 webpack 版本的 Vue 项目中配置 Storybook
|
4月前
|
JavaScript
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
85 0
|
5月前
|
JavaScript
Vue 开发中的一些问题简单记录,Cannot find module ‘webpack/lib/RuleSet‘
Vue 开发中的一些问题简单记录,Cannot find module ‘webpack/lib/RuleSet‘
326 1
|
5月前
|
JavaScript 前端开发 应用服务中间件
|
5月前
|
JavaScript
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
80 0
|
7月前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
101 0