vue异步组件前端的工程化工具--webpack

最新推荐文章于 2022-07-18 20:28:38 发布

VIP文章搞前端的正则妈

最新推荐文章于 2022-07-18 20:28:38 发布

阅读量243

点赞数 1

文章标签： webpack

本文链接：https://blog.csdn.net/xuwei1215225/article/details/89508197

版权

关于前端的工程化工具

grunt

资源打包
单元测试

gulp

流式操作工具
资源打包

webpack 【主流】

学习vue的过程肯定会接触到vue的单文件组件，进而接触到vue-cli(vue工程构建的脚手架工具)，但是vue-cli创建的工程对初学者很不友好，vue init webpack-simple project-name创建的项目又太过简单和片面。

接下来我们从初始化到写配置再到添加loader和插件逐步构建一个可用的vue工程化环境，让初学者亲自搭建vue-cli之余还了解到webpack常用的一些配置项。

资源打包工具，比如 js文件打包压缩， img 打包压缩。。。
可以自动解决模块化依赖问题
es6模块化

创建工程

前提你已经安装了node、npm环境

mkdir project-vue
cd project-vue

npm init
//初始化设置都按enter默认就好，或者按你需要改

安装webpack到项目中

npm install --save-dev webpack
//啰嗦一下淘宝镜像设置
npm install -g cnpm –registry=https://registry.npm.taobao.org

创建webpack配置文件

webpack在运行时候会找到启用webpack命令目录下的webpack.config.js,所以要创建该文件到项目根目录下。

//webpack.config.jsconst path = require('path')
module.exports ={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"js/[name].js"
    }
}

以上是最简单的模板，设置了入口文件（entry）和出口地址（output），这些有一点webpack基础的都知道，不了解的先去入门一下webpack的基础配置。而path函数则是node自带的路径相关的中间件，基本上整个项目就用到这样一个node的中间件，path就是用来做路径拼接返回一个路径字符串，可以简要看一下path。同时还要创建index.html和main.js文件，项目目录结构如下：
项目结构
index.html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>vue demo</title></head><body>
    <div id="app">
    </div>
    <script src="./dist/js/main.js"></script></body></html>

main.js里面随便写点js就行

运行

webpack

这里有一份npm script的介绍，不用谢

npm run build

根目录下会多出一个dist文件夹里面放了打包好的文件。

引入一系列的依赖和loader

vue工程当然要安装vue依赖啦

npm install --save vue

vue-loader是必须的，vue-template-compiler是vue-loader必须的依赖

npm install --save-dev vue-loader vue-template-compiler

写现代的项目怎么可能不用到es6以上，来个es编译器loader

npm install --save-dev babel-core babel-loader

再来个css的加载器和转换器,style-loader会把css转成js，再贴到html的style标签上的哦~

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

还有图片文件和字体文件的加载器，url-loader依赖于file-loader所以都要安装，url-loader会把小于限制的文件改成base64格式直接传入src里面，可以降低网络请求次数。而file-loader会自动帮我们添加文件名规则而且url地址一起跟着改变。

npm install --save-dev file-loader url-loader

以上的loader的配置下面开始简要讲解

loader配置项

每一种loader都对应着一种文件，我们匹配项目种的文件添加loader。

const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry:{
        app:'./src/main.js',
    },
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:"js/[name].js",
    },
    module:{
        rules:[
            {
                test:/\.js$/, //用正则匹配文件，用require或者import引入的都会匹配到
                loader:"babel-loader", //加载器名，就是上一步安

最低0.47元/天解锁文章

搞前端的正则妈

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue异步组件前端的工程化工具--webpack

关于前端的工程化工具grunt资源打包单元测试gulp流式操作工具资源打包webpack 【主流】学习vue的过程肯定会接触到vue的单文件组件，进而接触到vue-cli(vue工程构建的脚手架工具)，但是vue-cli创建的工程对初学者很不友好，vue init webpack-simple project-name创建的项目又太过简单和片面。接下来我们从初始化到...
复制链接

扫一扫