1、前言
做過一些vue項目，但是每次都是使用官方提供的腳手架來構建，發現里面有好多是我們項目用不到的東西，因此想自己搭建一個，看了許多相關的資料，也借鑒了很多大佬的經驗，想把自己的心得分享給大家。
2、webpack篇章
為了更好的搭建項目，和對webpack有一個更好的理解，特意又重新學了一下webpack，以便再以后的構建中更得心應手。
參數：
首先我們先來看一下他的參數有哪些
1、entry 入口文件
entry可以是個對象，可以是一個數組，也可以是個字符串。
當他是一個字符串的時候，可以用來定義入口文件;
entry: './js/main.js'
當他是一個數組的時候，里面包含一個入口文件，另外一個參數可以是用來配置webpack提供的一個靜態資源服務器，webpack-dev-server。webpack-dev-server會監控項目中每一個文件的變化，實時的進行構建，并且自動刷新頁面（通常我們寫在配置的json文件里）：
entry: [
'webpack/hot/only-dev-server',
'./js/app.js'
]
當entry是個對象的時候，我們可以將不同的文件構建成不同的文件，按需使用，比如在我的hello頁面中只要\引入hello.js即可：
entry: {
hello: './js/hello.js',
form: './js/form.js'
}
2、output 輸出文件
output是一個對象，它定義了打包后，我們的文件名 和打包后的文件存儲的路徑 參數有兩個 path fileName;
當我們想要打包成不同的文件的時候 我們可以這樣定義output
var path = require("path");
module.exports = {
entry: {
hello: './js/hello.js',
form: './js/form.js'
},
output:{
path:path.resolve(__dirname,"./build"),
filename:"[name].js"
}
}
當我們只有一個入口文件 我們可以這樣定義output
var path = require("path");
module.exports = {
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,"./build"),
filename:'build.js'
}
}
3、module 模塊
這部分是我們所要加載的模塊，用來解析我們那些無法用瀏覽器直接識別的一些文件，我們就定義在module.loaders中。這里通過正則表達式去匹配不同后綴的文件名，然后給它們定義不同的加載器。比如說給less文件定義串聯的三個加載器（！用來定義級聯關系 順序錯了會報錯的奧）：
module: {
loaders: [
{ test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{ test: /\.css$/, loader: "style!css" },
{ test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
]
}
另外一種寫法：
module:{
rules:[
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
},
{
test: /\.less$/,
use:[
{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}
]
}
]
}
4.resolve 可以自動添加文件的后綴
webpack在構建包的時候會按目錄的進行文件的查找，resolve屬性中的extensions數組中用于配置程序可以自行補全哪些文件后綴：
resolve:{
extensions:['','.js','.json']
}
//我們在引入文件時 就可以直接使用路徑+文件名就可以直接找到我們要引用的文件，例如:
require(‘common’)
5、externals
當我們想在項目中require一些其他的類庫或者API，而又不想讓這些類庫的源碼被構建到運行時文件中。此時我們就可以通過配置externals參數來解決這個問題：
externals: {
"jquery": "jQuery"
}
//這樣我們就可以直接使用 這個api了 例如：
var jQuery = require(“jquery”);
6、plugins 定義插件
插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程中生效，執行相關的任務。plugins是一個數組，我們可以把我們的要使用的插件在里面注冊要使用某個插件，當然我們需要通過npm安裝它，然后要做的就是在webpack配置中的plugins關鍵字部分添加該插件的一個實例
添加版權聲明的插件。
var webpack = require('webpack');
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究')
]
這樣就在打包后的文件中出現了這個內容
7、devServer 本地服務器的相關配置
| devserver的配置選項 | 功能描述 |
|---|---|
| contentBase | 默認webpack-dev-server會為根文件夾提供本地服務器，如果想為另外一個目錄下的文件提供本地服務器，應該在這里設置其所在目錄（本例設置到“public"目錄） |
| port | 設置默認監聽端口，如果省略，默認為”8080“ |
| inline | 設置為true，當源文件改變時會自動刷新頁面 |
| historyApiFallback | 在開發單頁應用時非常有用，它依賴于HTML5 history API，如果設置為true，所有的跳轉將指向index.html |
想不想讓你的瀏覽器監聽你的代碼的修改，并自動刷新顯示修改后的結果，其實Webpack提供一個可選的本地開發服務器，這個本地服務器基于node.js構建，可以實現監聽代碼的修改并且自動刷新修改后的結果，不過它是一個單獨的組件，在webpack中進行配置之前需要單獨安裝它作為項目依賴；
首先我們的下載 webpack-dev-server
cnpm install webpack-dev-server --save-dev
devserver作為webpack配置選項中的一項，以下是它的一些配置選項:
| devserver的配置選項 | 功能描述 |
|---|---|
| contentBase | 默認webpack-dev-server會為根文件夾提供本地服務器，如果想為另外一個目錄下的文件提供本地服務器，應該在這里設置其所在目錄（本例設置到“public"目錄） |
| port | 設置默認監聽端口，如果省略，默認為”8080“ |
| inline | 設置為true，當源文件改變時會自動刷新頁面 |
| historyApiFallback | 在開發單頁應用時非常有用，它依賴于HTML5 history API，如果設置為true，所有的跳轉將指向index.html |
devServer 配置例子：
devServer: {
contentBase: "./build",//本地服務器所加載的頁面所在的目錄
historyApiFallback: true,//不跳轉
inline: true//實時刷新
}
在package.json中的scripts對象中添加如下命令，用以開啟本地服務器：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
}
在終端中輸入npm run server即可在本地的8080端口查看結果
8、devtool 配置source maps 方便我們開發時候調試
| devtool選項 | 配置結果 |
|---|---|
| source-map | 在一個單獨的文件中產生一個完整且功能完全的文件。這個文件具有最好的source map，但是它會減慢打包速度； |
| cheap-module-source-map | 在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提高了打包速度，但是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試造成不便； |
| eval-source-map | 使用eval打包源文件模塊，在同一個文件中生成干凈的完整的source map。這個選項可以在不影響構建速度的前提下生成完整的sourcemap，但是對打包后輸出的JS文件的執行具有性能和安全的隱患。在開發階段這是一個非常好的選項，在生產階段則一定不要啟用這個選項； |
| cheap-module-eval-source-map | 這是在打包文件時最快的生成source map的方法，生成的Source Map 會和打包后的JavaScript文件同行顯示，沒有列映射，和eval-source-map選項具有相似的缺點； |
正如上表所述，上述選項由上到下打包速度越來越快，不過同時也具有越來越多的負面作用，較快的打包速度的后果就是對打包后的文件的的執行有一定影響。
對小到中型的項目中，eval-source-map是一個很好的選項，再次強調你只應該開發階段使用它，我們繼續對上文新建的webpack.config.js，進行如下配置:
module.exports = {
devtool: 'eval-source-map',
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,"./build"),
filename:"bundle.js"
}
}
3、webpack 搭建vue項目
1、搭建項目之前要做的準備
搭建一個項目我們首先要知道我都需要什么 要使用什么框架，要引入那些個loader等等。下面我們就以搭建vue項目作為例子來一起學習一下。
2、搭建過程
1.首先我們要安裝node.js,方法就不在里說明了。
2.我們要創建一個工程文件并進去項目:
3.創建package.json文件
cnpm init (推薦是用淘寶鏡像，下載的速度會快一些)中間一些選項直接enter 跳過就好
這時我們的項目是這樣的
4.局部安裝webpack
cnpm install webpack --save-dev
這時webpack已經安裝成功
5.下載我們需要的一些文件
cnpm install vue vue-router css-loader@* vue-loader vue-template-compiler babel-core babel-loader es2015 file-loader less less-loader style-loader url-loader webpack-dev-server --save-dev下載完成后的頁面是這樣的
在我門webstrom里面把這個node_modules的文件設置成如圖這樣，這個文件夾會很大，很容易造成卡死
6.所有的依賴我們都已經安裝完畢，接下倆我們就開始配置我們的項目參數
我們先看一下這個項目的結構
(1).我們需要創建一個項目的基礎頁面index.html并引入我們打包后的js 我們起名叫bundle.js.
(2).創建一個入口文件
main.js 作為所有文件的入口，這里面我們實例化vue對象 注冊路由，把對應的組件和文件引入到該頁面
(3).
router.js
(4.)
App.vue
(5).我們寫的一些組件例如:
about.vue
(6).看到這的小伙伴已經有點不耐煩了，接下來重點來了，我們要創建一個
webpack.config.js,配置上面我們所說的webpack的那些參數
var path = require("path");
// var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
mode:"development",//或者product || none 這三種都可以解決webpack-cli問題
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,"./build"),
filename:"bundle.js"
},
module:{
rules:[
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
},
{
test: /\.less$/,
use:[
{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}
]
},
{
test:/(\.jpg|\.png|\.gif|\.jpeg)$/,
loader:"file-loader"
},
{
test:/\.vue$/,
loader:"vue-loader"
}
]
},
plugins: [
// new webpack.ExtractTextPlugin("style.css")
],
//構建本地服務器的相關配置 需要在`package.json`里面激活
devServer: {
contentBase: "./",//本地服務器所加載的頁面所在的目錄
historyApiFallback: true,//不跳轉
inline: true//實時刷新
}
}
(7).package.json
{
"name": "vueproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
//激活本地服務器（注:`package.json`里面不能有注釋，會報錯）
"server": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"css-loader": "^0.28.7",
"es2015": "^0.0.0",
"file-loader": "^1.1.5",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"vue": "^2.5.3",
"vue-loader": "^13.3.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.3",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
}
}
到此為止 一個簡單的vue項目搭建完成，面對項目不同的需求，我們可以下載不同的依賴包。有問題的地方歡迎大家指出，我們可以一起進步。
