当前位置：首页 > Web开发 > 正文

webpack 4.x 从零开始初始化一个vue项目

2024-03-31 Web开发

标签：

创建目录

项目名称: vue-init

app

css

reset.sass

home

index.vue

router

index.js

main.js

App.vue

views

index.html

安装webpack npm i -D webpack 创建配置文件

webpack.config.js
基础配置

entry 入口

module 模块

plugins 插件

output 输出

进阶配置

resolve

devtool

devServer

...

基础配置先写好基本机构 module.exports = { enter: {}, module: {}, plugins: [], output: {} } 配置入口文件，以main.js作为打包入口文件 enter: { app: './app/js/main.js' } 配置module，里面主要配置使用的各种loader module: { rules: [ { test: /\.html$/, use: [ { loader: 'html-loader' } ] }, { test: /\.vue$/, use: [ { loader: 'vue-loader' } ] }, { test: /\.scss$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { module: true } }, { loader: 'sass-loader' }, ] }, ] },

test 的值为正册表达式，配对文件后缀，表示什么文件对应的loader

sass 需要使用多个loader，，解析顺序是从右向左

options: { module: true } 开启css module

稍后再配置plugins,先配置output //在webpack.config.js顶部引入path const path = require('path'); output: { filename: '[name].min.js', path: path.resolve(_dirname, 'dist') } }

filename表示打包后输出的文件名

[name] 对应 enter.app的值

path 打包输出的路径

path.resolve() webpack的执行环境是node，这里的path是node里的一个对象,用于处理文件路径和目录路径

配置好了我们开始安装loaders

npm i -D html-loader vue-loader style-loader css-loader sass-loader

如果有loader安装不成功请再单个安装它，或者换用cnpm

基础配置代码

到这一步我们的基础配置已经做好，代码如下：

module.exports = { enter: { app: './app/js/main.js' }, module: { rules: [ { test: /\.html$/, use: [ { loader: 'html-loader' } ] }, { test: /\.vue$/, use: [ { loader: 'vue-loader' } ] }, { test: /\.scss$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { module: true } }, { loader: 'sass-loader' }, ] }, ] }, plugins: [], output: { filename: '[name].min.js', path: path.resolve(_dirname, 'dist') } } 进阶配置使用devServer devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000 }

contentBase 告诉服务器从哪个目录中提供内容。

compress 压缩

port 启动端口号

配置好了我们开始安装它

npm i -D webpack-dev-server 测试添加一些代码以供测试

home/index.vue

<template> <div id="home"> <h1>首页</h1> <p>123123<p> </div> </template> <script> export default {} </script> <style lang="scss" scoped> .home { color: red; font-size: 80px; p { color: blue } } </style>

router/index.js

import Vue from "vue" import Router from "vue-router" import Home from "../home/index.vue" Vue.use(Router); export default new Router({ routes: [{ path: '/', name: 'home', component: Home }] })

App.vue

<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'app' }; </script> <style lang="scss" scoped> </style>

main.js

import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false; new Vue({ router, render: h => h(App) }).$mount("#app")

我们还需要安装 vue 和vue router

npm i vue vue-router 让devServer跑起来

还需要安装两个依赖

npm i -D html-webpack-plugin clean-webpack-plugin

webpack.config.js顶部加入如下代码

const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 注意这里的写法，这样写 const CleanWebpackPlugin 会报错

html-webpack-plugin

官网文档解释：HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。另外你可以在github查看这个项目的详细配置。

clean-webpack-plugin 在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。

配置plugins

plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: './views/index.html' }) ],

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"></div> </body> </html>

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/41141.html

上一篇：cesium添加多个geojson文件并分别控制显示和隐藏
下一篇：在vue中使用基于d3为基础的dagre

webpack 4.x 从零开始初始化一个vue项目

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢