Webpack+Vue 项目搭建

最新推荐文章于 2024-03-20 00:42:48 发布

小小弯_Shelby

最新推荐文章于 2024-03-20 00:42:48 发布

阅读量462

点赞数

分类专栏：前端 webpack构建项目文章标签：搭建Webpack+Vue webpack构建

本文链接：https://blog.csdn.net/weixin_44293690/article/details/85274853

版权

前端同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

webpack构建项目

1 篇文章 0 订阅

订阅专栏

如何使用webpack构建Vue项目？
步骤：
1）新建一个web项目：新建一个目录，再进入目录根路径执行npm init来初始化最简单的采用了模块化的开发项目。此时会产生package.json文件。
在这里插入图片描述
2）安装webpack到本项目：打开命令行，进入项目根目录，输入npm i -D webpack，便可安装webpack到本项目。此时根目录下多了node_modules文件夹（里面有很多依赖包）和package-lock.json。

3）安装相关依赖包npm i -D webpack-cli安装babel转译ES6成ES5：npm i -D babel-core babel-loadernpm i -D babel-preset-env安装处理css的编译器：npm i -D style-loader css-loader安装Vue框架运行需要的库：npm i -S vuenpm i -D vue-loader vue-template-compiler
在这里插入图片描述
4）在根目录下新建webpack的配置文件webpack.config.js，其内容如下：

const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    // JS 执行入口文件
    entry: './src/index.js',
    output: {
        // 把所有依赖的模块合并输出到一个 main.js 文件
        filename: 'main.js',
        // 输出文件都放到 dist 目录下
        path: path.resolve(__dirname, './dist'),
    },
    module:{
       rules:[
           {test: /\.css$/, use:['style-loader','css-loader']},
           {test:/\.vue$/, use:['vue-loader']},
           {test:/\.js/, use:['babel-loader'], exclude:/node_modules/}
       ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    devtool: 'source-map' // 输出 source-map 方便直接调试 ES6 源码
}

在这里插入图片描述
5）新建入口页面index.html，内容如下：

6）在某个目录下新建一个vue单文件，内容如下：

7）在src目录下新建JS入口文件index.js，内容如下：

8）编译运行：成功的情况如下所示：

9）上面运行成功后，即可实现了webpack构建vue的一个大体框架了，这是内容最简单的、页面最少的一个基础框架的时候。
另外，给出package.json的内容：这些依赖都是安装包依赖时自动加进来的。
在这里插入图片描述
使用DevServer
1）前面只是让Webpack正常运行起来了，但在实际开发中我们会还需要：提供HTTP服务。
2）在前面构建的项目中继续集成DevServer，需要安装DevServer:npm i -D webpack-dev-server
3）安装成功后执行webpack-dev-server命令，DevServer就启动了。这时你会看到控制台有一串日志输出：
Project is running at http://localhost:8080/
webpack output is served from /
这意味着DevServer启动的HTTP服务器监听在8080端口。访问http://localhost:8080/这个网址，就能获取根目录下的index.html了。用浏览器打开这个地址你会发现页面空白，错误原因是 ./dist/main.js 加载404了。同时你会发现并没有文件输出到 dist 目录，原因是 DevServer 会把 Webpack 构建出的文件保存在内存中，在要访问输出的文件时，必须通过 HTTP 服务访问。由于 DevServer 不会理会 webpack.config.js 里配置的 output.path 属性，所以要获取 main.js 的正确 URL 是 http://localhost:8080/main.js，对应的 index.html 应该修改为：

 <html>
  <head>
   <meta charset="UTF-8">
  </head>
  <body> 
     <div id="app"></div> 
     <!--导入 DevServer 输出的 JavaScript 文件--> 
     <script src="main.js"></script>
  </body>
 </html>

4）webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，即没有输出到webpack.config.js文件里设置的output项下。
注意：你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件。
5）webpack-dev-server使用方法：
https://segmentfault.com/a/1190000006670084
6）启动webpack-dev-server：npm run dev
当然通过命令npm run dev启动时要先在package.json文件中做以下配置：
在这里插入图片描述
参数说明：
–content-base ./：设定webpack-dev-server伺服的目录在当前目录下。
–inline：实现自动刷新。
–hot：实现模块热替换。
–progress 显示打包的进度。
–quiet 控制台中不输出打包的信息。
–compress 开启gzip压缩。
7）webpack-dev-server支持2种自动刷新的方式：
·Iframe mode
·inline mode

小小弯_Shelby

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Webpack+Vue 项目搭建

如何使用webpack构建Vue项目？步骤：1）新建一个web项目：新建一个目录，再进入目录根路径执行npm init来初始化最简单的采用了模块化的开发项目。此时会产生package.json文件。2）安装webpack到本项目：打开命令行，进入项目根目录，输入npm i -D webpack，便可安装webpack到本项目。此时根目录下多了node_modules文件夹（里面有很多依赖包...
复制链接

扫一扫