基于webpack搭建vue的开发环境,手动搭建vue脚手架

最新推荐文章于 2023-03-30 15:10:48 发布

多晴丶

最新推荐文章于 2023-03-30 15:10:48 发布

阅读量384

点赞数 1

分类专栏： vue 文章标签： javascript sass npm node.js html

本文链接：https://blog.csdn.net/weixin_47222576/article/details/108067816

版权

vue 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

基于webpack搭建vue的开发环境

1:创建并初始化项目

mkdir webpack-demo //从cmd命令行常见文件夹
cd webpack-demo //进入目录
npm init -y  //初始化package.json
npm install webpack webpack-cli --save-dev //安装webpack和webpack-cli

2:在根目录下常见src文件夹创建index.js和index.html文件

  /- webpack-demo
  	|- package.json
	//编译生成的文件
 	|- /dist
 		|- index.html
      	|- index.js
   //创建的文件   
   	|- /src
      	|- main.js
      	|- index.html

3: 修改package.json

"name": "webpack-demo",
"version": "1.0.0",
"description": "",   
"private": true,   
"main": "index.js",
"scripts": {
			"test": "echo \"Error: no test specified\" && exit 1",     
			"build": "webpack --mode production",      
			"dev": "webpack --mode development"
},

4:在根目录下创建webpack.config.js

//引入webpack,主要用于对webpack内置插件调用时使用
const webpack = require('webpack')
//引入path，对路径进行处理
const path = require('path')

//创建一个配置对象并导出
module.exports  = {
    //配置入口
    entry: './src/main.js',
    //配置出口
    output: {
        //出口路径
        path:path.resolve(__dirname,'dist'),
        //出口文件名
        filename:'index.js'
    }

}

5:打包测试执行npm run build，生成的dist如下

|-  /dist
    |- index.html
	|- main.js

6:实现每次编译前自动清空dist目录安装clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

7:实现从html模板自动生成最终html 安装html-webpack-plugin

npm install html-webpack-plugin --save-dev

8:下载完成配置webpack.config.js文件

const { CleanWebpackPlugin } = require('clean-webpack-plugin');//导入CleanWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');//导入HtmlWebpackPlugin
.....
 plugins: [
        new VueLoaderPlugin(),
        // 自动清空dist目录
        new CleanWebpackPlugin(),
        // 设置html模板生成路径
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        }), 
   ],

9:配置各种loader(文件解析器)

npm install --save-dev babel-loader @babel/core @babel/preset-env

//在项目根目录下创建一个.babelrc文件，并写入
{
  "presets": ["@babel/preset-env"]
}

//在webpack.config.js下配置loader
module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

10:搭建开发环境

npm install webpack-dev-server --save-dev

//修改package.json：
"scripts": {
		"build": "webpack --mode production",
		"dev": "webpack --mode development"
 		"serve": "webpack-dev-server --open --mode development"
		}

    
module.exports = {    
// 动态监测并实时更新页面
	devServer: {
			contentBase: './dist',
         	// 默认8080，可不写
         	port: 8080,
         	// 热更新，无需刷新
         	hot: true
     },
	
 };
//执行npm run serve，会在本地启动一个nodejs的web服务，浏览器会自动打http://localhost:8080/

11:与vue集成

npm install vue-loader vue-template-compiler -D//安装vue-loader vue-template-compiler
{test:/\.vue$/,use:['vue-loader']},//配置webpack文件：
//实例化vueLoaderPlugin插件
const { VueLoaderPlugin }=require('vue-loader')
//添加插件实例化：
 },
    plugins: [
        new VueLoaderPlugin()
]

12:与sass集成

npm install sass-loader node-sass -D//安装sass
//配置：
 module: {
        rules: [
            {test:/\.(scss|sass)$/,use:['style-loader','css-loader','sass-loader']},
        ]
    },

13:与vue-router和vuex集成

npm install vue-router -D//安装vue-router
npm install vuex -D //安装vuex

14:以上按照步骤走都不会报错,注意点,在执行vue的时候一定要在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>
    <router-view></router-view>
</body>

</html>

否则…

//控制台
[Vue warn]: Cannot find element: #app

这个小bug找了好久,最后创建一个脚手架,一对比,看出来了…

多晴丶

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
基于webpack搭建vue的开发环境,手动搭建vue脚手架

基于webpack搭建vue的开发环境1:创建并初始化项目mkdir webpack-demo //从cmd命令行常见文件夹cd webpack-demo //进入目录npm init -y //初始化package.jsonnpm install webpack webpack-cli --save-dev //安装webpack和webpack-cli2:在根目录下常见src文件夹创建index.js和index.html文件 /- webpack-demo |- packag
复制链接

扫一扫