基於webpack的vue項目

參考文檔:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest  

webpack配置參考了vue-cli提供webpack-simple模板,這也是vue-cli裏面最簡單的一個webpack配置,非常適合從零開始學習(自行安裝node.js)

1、查看npm -v是否已經安裝

npm -v

 

 

2、安裝webpack

npm i webpack -g

 

3、安裝webpack4

npm i webpack-cli -g

上一步中安裝位置需要配置到環境變量

 安裝vue

npm install vue vue-cli -g

 

檢查安裝vue情況

 

 

 

 

4、新建一個文件夾vue-webpack-simple

     新建package.json

 

 

5、進入剛剛創建的目錄

 

6、執行

npm init -y

    安裝vue webpack webpack-dev-server

npm i vue --save
npm i webpack webpack-dev-server --save-dev

7、根目錄下新建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>
    
</body>
</html>

8、根目錄下新建webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {};

9、新建src文件夾,src文件夾下新建main.js

    整個項目的結構如下

10、JS模塊化

在ES6出現之前,js是沒有統一的模塊體系。
服務器端使用CommonJS規範,而瀏覽器端又有AMD和CMD兩種規範webpack的思想就是一切皆模塊,官方推薦使用commonJS規範,這使得我們瀏覽器端也可以使用commonJS的模塊化寫法

module.exports = {}

11、src目錄下新建一個util.js

module.exports = function say() {
    console.log('hello world');
}

     main.js

var say = require('./util');
say();

   修改webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/main.js', // 項目的入口文件,webpack會從main.js開始,把所有依賴的js都加載打包
    output: {
        path: path.resolve(__dirname, './dist'), // 項目的打包文件路徑
        publicPath: '/dist/', // 通過devServer訪問路徑
        filename: 'build.js' // 打包後的文件名
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    }
};

修改package.josn

"scripts": {
    "dev": "webpack-dev-server --open --hot",
    "build": "webpack --progress --hide-modules"
  },

注意:webpack-dev-server會自動啓動一個靜態資源web服務器 --hot參數表示啓動熱更新

修改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>
    <script src="/dist/build.js"></script>
</body>

</html>

11、運行

npm run dev

可以發現瀏覽器自動打開的一個頁面,查看控制檯,有hello world打出

隨意修改util.js,可以發現瀏覽器會自動刷新,非常方便。

 

 

 

 

 

 

 

 

 

 12、打包後的bundle.js文件,運行

npm run build

 

 

 13、可以看到生成了一個dist目錄,裏面就有打包好後的bundle.js

 

 

 

21、引入vue

安裝vue

npm install vue

 

 

 

main.js

import Vue from 'vue';

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello 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">
        {{message}}
    </div>
    <script src="/dist/build.js"></script>
</body>
</html>

修改webpack.config.js文件

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
};

22、重新執行

npm run dev

 

 

 

 

 

 31、引入scss和css

webpack默認只支持js的模塊化,如果需要把其他文件也當成模塊引入,就需要相對應的loader解析器

npm i node-sass css-loader vue-style-loader sass-loader --save-dev

或者單獨安裝scss

npm install scss-loader scss --save-dev

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            }
        ]
    }
};

解釋:

{
    test: /\.css$/,
    use: [
        'vue-style-loader',
        'css-loader'
    ],
}

匹配後綴名爲css的文件,然後分別用css-loader,vue-style-loader去解析
解析器的執行順序是從下往上(先css-loader再vue-style-loader)

*用vue開發,所以使用vue-style-loader,其他情況使用style-loader

css-loader使得我們可以用模塊化的寫法引入css,vue-style-loader會將引入的css插入到html頁面裏的style標籤裏

要引入scss也是同理的配置寫法:

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ],
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader?indentedSyntax'
                ],
            }]
    }

在src目錄下新建style目錄,style目錄裏新建common.scss

body {
    background: #fed;
}

main.js

import './style/common.scss';

運行效果

npm run dev

 

 41、使用babel轉碼

ES6的語法大多數瀏覽器依舊不支持,bable可以把ES6轉碼成ES5語法,這樣我們就可以大膽的在項目中使用最新特性了

npm i babel-core babel-loader babel-preset-env babel-preset-stage-3 --save-dev

項目根目錄新建一個.babelrc文件

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ]
}

webpack.config.js添加一個loader

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
}

exclude表示忽略node_modules文件夾下的文件,不用轉碼,試下async await語法

util.js

export default function getData() {
    return new Promise((resolve, reject) => {
        resolve('ok');
    })
}

main.js

import getData from './util';
import Vue from 'vue';

import './style/common.scss';

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    async fetchData() {
      const data = await getData();
      this.message = data;
    }
  },
  created() {
    this.fetchData();
  }
});

控制檯會報一個錯誤regeneratorRuntime is not defined,因爲我們沒有安裝babel-polyfill

npm i babel-polyfill --save-dev

修改webpack.config.js的入口

entry: ['babel-polyfill', './src/main.js'],

重新npm run dev,可以發現正常運行

 

 

 

 

 

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章