webpack手动搭建Vue项目

最新推荐文章于 2024-03-26 22:18:31 发布

置顶刀尖上的豆芽

最新推荐文章于 2024-03-26 22:18:31 发布

阅读量157

点赞数 1

文章标签： vue

原文链接：https://juejin.cn/post/6844903861724020744

版权

#废话不多说，直接捋袖子干！#

初始化项目

新建一个文件夹“WebpackVue”,然后进入终端初始化项目

npm init -y

此时，刷新一下项目，会再根目录下出现package.json文件，由此在文件中加入一下依赖

// dependencies是指在使用npm i -save [modules] 的时候安装的，执行 npm install --production 的时候会安装
"dependencies": {
    "vue": "^2.6.10"
  },
  
// devDependencies是指在使用npm i -save-dev [modules] 的时候安装的，执行 npm install --production 的时候不会安装
"devDependencies": {
	// 安装babel相关的
	"@babel/core": "^7.4.5",
	"@babel/preset-env": "^7.4.5",
	"@babel/preset-react": "^7.0.0",
	"babel-loader": "^8.0.6",
	"babel-polyfill": "^6.26.0",
	// 插件：每次build的时候清空旧文件
	"clean-webpack-plugin": "^3.0.0",
	// css处理
	"css-loader": "^2.1.1",
	// 处理CSS兼容
	"postcss-loader": "^3.0.0",
	"autoprefixer": "^9.6.0",
	// 添加sass支持
	"node-sass": "^4.12.0",
	"sass-loader": "^7.1.0",
	// 插件
	"html-webpack-plugin": "^3.2.0",
	"style-loader": "^0.23.1",
	// 添加webpack打包
	"webpack": "^4.33.0",
	"webpack-cli": "^3.3.3",
	// 提供web容器，可在本地访问http://localhost:port
	"webpack-dev-server": "^3.7.1",
	// 提供配置文件的合并
	"webpack-merge": "^4.2.1",
	// 添加vue-loader
	"vue-loader": "^15.7.0",
	"vue-template-compiler": "^2.6.10",
}

安装依赖

终端输入： npm install   或  npm i

配置babel

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

在根目录下增加一个postcss.config.js文件

module.exports = {
	plugins: {
		'autoprefixer': {browsers: 'last 5 version'}
	}
}

在根目录下新建一个webpack.base.config.js作为基础webpack的配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
	// 入口文件
    entry: './src/main.js',
    output: {
        filename: 'bundle.[hash].js',
        path: path.join(__dirname, '/dist')
    },
    module: {
    	// 配置相应的规则
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            }, {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
        ]
    },
    // 配置相应的插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
        new VueLoaderPlugin()
    ]
};

在根目录下新建webpack.dev.config.js文件作为开发环境的配置

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');

module.exports = merge(baseConfig, {
	// 设置为开发模式
    mode: 'development',
    devtool: 'inline-source-map',
    // 配置服务端目录和端口
    devServer: {
        contentBase: './dist',
        port: 3000
    }
});

在根目录下新建webpack.product.config.js文件作为生产环境的配置

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');

module.exports = merge(baseConfig, {
	// 设置为生产模式
    mode: 'production'
});

配置script命令

  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.config.js",
    "build": "webpack --config webpack.product.config.js"
  },

在根目录新建src目录，和public目录

### public目录中新建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>webpack & Vue</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

### 在src目录下新建入口文件main.js和App.vue
main.js文件
	import Vue from 'vue';
	import App from './App.vue';
	import './index.scss';
	
	new Vue({
	  el: '#root',
	  render: h => h(App),
	});

App.vue文件
	<template>
	  <div id="app">
	    <h1 class="hello">hello webpack & Vue</h1>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "app"
	};
	</script>
	
	<style scoped>
	</style>

在src目录新建index.scss文件，测试scss文件

$blog-color-red: #ff0000;
.hello {
	color: $blog-color-red;
}

运行程序

在终端输入： npm run start

不出意外会自动跳到浏览器界面，并且显示红色的“Hello Vue &Webpack”字样

打包文件

终端输入：npm run build

不出意外的话会在根目录下生成dist文件，可以在文件夹中之间打开该文件，显示红色的**Hello Vue & Webpack!**字样

注：本片博客是借助他人文章进行改写的，已经对其中的小问题进行了修改，按照套路进行就可以一次成功，如有冒犯请多包含！

刀尖上的豆芽

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack手动搭建Vue项目

#废话不多说，直接捋袖子干！#初始化项目新建一个文件夹“WebpackVue”,然后进入终端初始化项目npm init -y此时，刷新一下项目，会再根目录下出现package.json文件，由此在文件中加入一下依赖// dependencies是指在使用npm i -save [modules] 的时候安装的，执行 npm install --production 的时候会安装"dependencies": { "vue": "^2.6.10" }, // devDepend
复制链接

扫一扫