從零開始的 webpack4 + vue2.x

時間 2019-11-06

標籤開始 webpack4 webpack vue2.x vue 简体版

原文原文鏈接

新建文件夾 webpack-vue

安裝依賴

yarn init  //初始化package.json
yarn add webpack webpack-cli   //添加webpack、webpack-cli

//ps:不知那個版本開始就須要安裝webpack-cli了

新建index.html

// 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 v4</title>
</head>
<body>
    <div id="root"></div>
    <script src="dist/main.js"></script>
</body>
</html>

新建文件夾src，在src下新建index.js

// src/index.js
console.log('hello webpack v4');

第一次打包

//終端
webpack

你會發現目錄底下多了dist文件夾裏面有main.js，打開index.html 能夠看到console裏已經打印出了hello webpack v4,
在終端會有一個警告提示，大體意思是沒有設置mode將會使用生產模式，須要指定開發環境或者生產環境，打開dist/main.js，發現js確實是被壓縮過的css

//console
hello webpack v4

package.json

//package.json
...
"scripts":{
    "start":"--mode development",
    "build": "--mode production"
 }
...

第二次打包

yarn start   //開發環境
yarn build   //生產環境（壓縮）

webpack-dev-server

手動打開瀏覽器太麻煩html

//終端
yarn add webpack-dev-server   //添加webpack-dev-server

//修改index.html
<script src="main.js"></script>

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

第三次打包

yarn start

自動打開瀏覽器了，
修改index.js試試

加入Vue

咱們將一個一個解決問題，不會一次安裝全部依賴vue

yarn add vue  //添加依賴

在src下面新建文件夾pages,在pages裏面新建app.vue文件

//app.vue
<template>
    <section class="main">
        <p>我來了{{name}}</p>
    </section>
</template>

<script>
export default {
    data () {
        return {
            name:"vue + webpack"
        }
    }
}
</script>

<style>
.main>p{
    color: #000;
}
</style>

修改index.js

import Vue from 'vue'
import App from './pages/app.vue'

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

//終端
yarn start

這時候可預見的報錯來了，node

Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
//翻譯：模塊解析失敗，您可能須要一個適當的加載程序來處理這個文件類型

看報錯，咱們一個個解決
搜索關鍵詞，很容易發現是沒有安裝vue-loader,新建webpack.config.jswebpack

//webpack.config.js
module.exports = {
    module:{
        rules:[
            {test:/\.vue$/,use:'vue-loader'}
        ]
    }
}

vue-loader在15以後須要在webpack.config.js中當插件引入web

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

//終端
yarn start

再次報錯json

Uncaught Error: Module build failed: Error: Cannot find module 'vue-template-compiler'
...

很明顯，要你安裝vue-template-compiler瀏覽器

yarn add vue-template-compiler

//終端
yarn start

繼續報錯app

Module not found: Error: Can't resolve 'css-loader'

提示安裝css-loaderwebpack-dev-server

yarn add css-loader

bingo! webpack4+vue2第一個項目成功運行

從js中分離css

這時候細心的你發現css被塞到head裏面，咱們來把css分離出來。使用webpack的插件extract-text-webpack-plugin@next

yarn add extract-text-webpack-plugin@next

在webpack.config.js中添加插件

//webpack.config.js
const ExtractTextWebapckPlugin = require('extract-text-webpack-plugin');  //引入插件

module.exports = {
    module:{
        rules:[
            { 
                test: /\.vue$/, 
                loader: 'vue-loader',
                options: { 
                    loaders: { 
                        css: ExtractTextWebapckPlugin.extract({ use: 'css-loader' }) 
                    }
                }
            }
        ]
    },
    plugins:[
        new ExtractTextWebapckPlugin('style.css')
    ]
}

index.html引入css

<!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 v4</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
</body>
</html>

//終端
yarn build

打包完成後dist目錄裏面出現了main.js和style.css

處理圖片

新建文件夾img,用來放圖片

//app.vue
<template>
    <section class="main">
        <p>我來了{{name}}</p>
        <img src="../img/1.jpg" alt="">
    </section>
</template>

<script>
export default {
    data () {
        return {
            name:"vue + webpack"
        }
    }
}
</script>

<style>
.main>p{
    color: #000;
}
</style>

//終端
yarn start

//報錯
./src/img/1.jpg
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

基本能夠看出來是圖片有問題，沒有loader處理圖片

file-loader與url-loader

yarn add file-loader url-loader

修改webpack.config.js

//webpack.config.js
...
rule:[
    ...
    { 
        test: /\.(png|jpg|gif)$/, 
        use: [{ loader: 'url-loader',options: { limit: 8192 } }] 
    }
    ...
]
...

yarn start

打包成功...

webpack其他一些配置

resolve，watchOptions，devServer

//webpack.config.js
    resolve: {  //導入的時候不用寫拓展名
        extensions: [' ', '.js', '.json', '.vue', '.scss', '.css']
    },
    watchOptions: {
        ignored: /node_modules/,
        aggregateTimeout: 300,//防止重複保存頻繁從新編譯,300ms內重複保存不打包
        poll: 1000  //每秒詢問的文件變動的次數
    },
    devServer:{
        inline: true,
        compress: true,
        host: '127.0.0.1',
        port: 2500,
        historyApiFallback: true
    }

相關標籤/搜索

每日一句

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