webpack手動搭建Vue項目

時間 2019-11-07

標籤 webpack 手動搭建 vue 項目简体版

原文原文鏈接

webpack手動搭建Vue項目

初始化項目

新建一個目錄，而後初始化項目css

npm init
複製代碼

在package.json中加入如下依賴html

// 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文件vue

{
    "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!**字樣node

打包文件

npm run build
複製代碼

不出意外的話會在根目錄下生成dist文件，能夠在文件夾中之間打開該文件，顯示紅色的**Hello Vue & Webpack!**字樣react

結語

以前也是通常選用框架自帶的腳手架工具，趁着端午有時間，主動配置一下webpack & Vue，固然以上只是一些簡單的配置，更復雜的配置還須要修改webpack配置，有時間再補充。另一篇配置webpack & React。webpack

項目GitHub地址：github.com/kavience/we…git

(完)github

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。