1 使用webpack搭建vue開發環境

時間 2019-12-11

標籤使用 webpack 搭建 vue 開發環境简体版

原文原文鏈接

1 先去node.js官網下載nodejs而且安裝javascript

安裝成功以後在命令行輸入node -v 回車，npm -v回車若是顯示對應的版本號，說明node安裝成功，自帶的npm也安裝成功css

2 在d盤下建立一個目錄好比demo目錄html

3 在命令行輸入d：回車，而後在輸入cd demo回車切換到建立的目錄下：vue

4 而後用npm初始化該目錄：npm init 回車，完成後會在demo目錄下生成一個package.json的文件java

5 在本地局部安裝webpacknode

npm install webpack --save-devwebpack

安裝成功以後會在package.json文件中多一項配置es6

  "devDependencies": {
    "webpack": "^4.26.0"
  }

6 接着在本地安裝webpack-dev-server 他能夠在開發環境中提供不少服務，好比啓動一個服務器，熱跟新，接口代理等web

若是在devDependencies中包含webpack和webpack-dev-server,則表示安裝成功npm

"devDependencies": {
"webpack": "^4.26.0",
"webpack-dev-server": "^3.1.10"
}

7 其實webpack就是一個.js的配置文件

而後在demo目錄下建立一個webpack.config.js文件，並初始化他的內容爲：

var config = {

};

module.exports = config

8 而後再package.json的scripts裏增長一個快速啓動webpack-dev-server服務的腳本

9 當運行npm run dev命令時就是執行webpack-dev-server --open --config webpack.config.js命令

--config是指向webpack-dev-server讀取的配置文件

--open會在執行命令時自動在瀏覽器打開頁面，默認地址是127.0.0.1:8080，ip和端口都是能夠配置的：

10 配置webpack最重要的必選的入口entry和出口output

entry：告訴webpack從哪裏尋找依賴，而且編譯

output：用來配置編譯後的文件存儲位置和文件名

在demo目錄下新建main.js做爲入口的文件，而後再webpack.config.js中進行入口和出口的配置

//
var path=require("path");


var config = {
    entry:{
        //配置的單入口，webpack會從main.js文件開始工做
        main:'./main'
    },
    
    output:{
        
        //打包後文件的輸出目錄
        path:path.join(_dirname,'./dist'),
        //指定資源文件引用的目錄
        publicPath:'/dist/',
        //用於指定輸出文件的名稱
        filename:'main.js'
        
    }

};

module.exports = config

這裏配置的output意思爲打包後的文件會存儲爲demo/dist/main.js

11 在demo目錄下新建一個index,html做爲咱們spa的入口

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>webpack app</title>
</head>
<body>
    <div id="app">
        hello word
    </div>

    <script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

12 在終端執行下面的命令就會在瀏覽器中打開index頁面

npm run dev

若是運行後報錯以下：

那是由於webpack 4以上把命令遷移到webpack-cli上，能夠下局部運行以下命令來安裝

npm i -D webpack-cli來安裝

安裝完以後繼續運行npm run dev若是有若有以下錯誤

檢查全局變量_dirname的下劃線是否是兩個__dirname,不然將顯示以下頁面

至此已經完成了webpack+vue配置的最重要一步了

13 webpack --progress --hide-modules

接下來逐步完善配置文件：

對於不一樣的模塊須要用不一樣的加載器來處理，而加載器就是webpack最重要的功能，經過安裝不一樣的加載器能夠對各類文件後綴名進行處理

好比處理css樣式：就要安裝style-loader和css-loader,經過npm來安裝

npm install css-loader --save-dev

npm install style-loader --save-dev

14 安裝完加載器以後再webpack.config.js文件中配置加載器

    module:{

        //再module對象的rules屬性能夠指定一系列的loeders，每個loader都必須包含test和use兩個選項
        //此配置的意思：
        //當webpack編譯過程當中遇到require和import語句導入一個後綴名爲.css的文件時
        //，先將他經過css-loader轉換，再經過style-loader轉換，而後繼續打包
        rules:[

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

        ]
    }

15 使用webpack的插件plugins

extract-text-webpack-plugin：提取css，生成一個main.css的文件

經過npm安裝該插件

npm install extract-text-webpack-plugin --save-dev

16 安裝完成後再webpack-config.js中導入插件，並改寫loader的配置

var extractTextPlugin=require('extract-text-webpack-plugin');

            {
                test:/\.css$/,
                use:extractTextPlugin.extract({

                    use:'css-loader',
                    fallback:'style-loader'
                })
            }

    plugins:[

        //重命名提取後的css文件
        new extractTextPlugin("main.css")
    ]

17 而後再index頁面經過link的方式應用，若是報這種錯誤

(node:30260) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /dist/
i ｢wdm｣: wait until bundle finished: /dist/main.css
i ｢wdm｣: wait until bundle finished: /dist/main.js
D:\demo\node_modules\webpack\lib\Chunk.js:846
                throw new Error(
                ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (D:\demo\node_modules\webpack\lib\Chunk.js:846:9)
    at D:\demo\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
    at Array.forEach (<anonymous>)
    at D:\demo\node_modules\extract-text-webpack-plugin\dist\index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\demo\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (D:\demo\node_modules\tapable\lib\Hook.js:154:20)

說明你用的是webpack 4以上的版本，4以上的版本不支持extract-text-webpack-plugin這個插件

解決辦法：mini-css-extract-plugin這個插件代替，安裝

18 使用webpack構建vue項目時可使用一種新的構建模式.vue單文件組件

.vue單文件組件：一個後綴名爲.vue的文件，在webpack中使用vue-loader就能夠對這種文件進行處理：一個.vue文件包含三部分tempale，script，style

按照以下所示順序安裝來使用.vue文件

npm install --save vue

npm install --save-dev vue-loader

npm install --save-dev vue-style-loader

npm install --save-dev vue-template-compiler

npm install --save-dev vue-hot-reload-api

npm install --save-dev babel

npm install --save-dev babel-loader

npm install --save-dev babel-core

npm install --save-dev babel-plugin-transform-runtime

npm install --save-dev babel-preset-es2015

npm install --save-dev babel-runtime

19 安裝完成後修改webpack.config.js來支持vue文件和ES6的解析

            {
                test:/\.css$/,
                use:[
                        {
                            loader:extractTextPlugin.loader,
                            options:{

                            }
                        },
                        'css-loader'
                    ]
            },

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

            {
                test:'/\.vue$/',
                loader:'vue-loader',
            }

20 在demo目錄下新建一個名爲.babelrc的文件，並寫入babel的配置，webpack會依賴此配置文件來使用babel編譯es6代碼

{

    "presets":["es2015"],
    "plugins":["transform-runtime"],
    "commments":false
}

21 配置好這些就可使用vue文件了

相關標籤/搜索

每日一句

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