webpack手动搭建Vue项目

内容简介：新建一个目录，然后初始化项目在package.json中加入以下依赖在根目录下新建一个.babelrc文件

新建一个目录，然后初始化项目

npm init
复制代码

在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
复制代码

配置bable

在根目录下新建一个.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/index.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()
    ]
};

复制代码

在根目录下新建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目录，和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新建入口文件index.js和App.vue

import Vue from 'vue';
import App from './App.vue';
import './index.scss';

new Vue({
  el: '#root',
  render: h => h(App),
});

复制代码

<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!**字样

以上所述就是小编给大家介绍的《webpack手动搭建Vue项目》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

The Algorithmic Beauty of Plants

Przemyslaw Prusinkiewicz、Aristid Lindenmayer / Springer / 1996-4-18 / USD 99.00

Now available in an affordable softcover edition, this classic in Springer's acclaimed Virtual Laboratory series is the first comprehensive account of the computer simulation of plant development. 150......一起来看看《The Algorithmic Beauty of Plants》这本书的介绍吧!

码农工具

XML、JSON 在线转换

在线XML、JSON转换工具

HEX CMYK 转换工具

HEX CMYK 互转工具

HSV CMYK 转换工具

HSV CMYK互换工具