剛才是接觸webpack時總會再配置文件那卡住，有時甚至花費1天的時間，有時甚至找不出問題所在。所以總結(jié)一下在項目使用遇到的問題，也為自己記錄下來。
什么是webpack，webpack有什么好處，能做什么，自己搜搜就知道了。
首先，確定電腦中安裝了nodeJS，npm，最好安裝一下淘寶鏡像，國內(nèi)的網(wǎng)速，您懂的。好了，正式開始了
開始安裝
1，打開cdm命令，選擇需要新建的項目位置，新建一個新文件夾webpack-demo，輸入下面
//新建package.json文件 跟著提示一步一步來
npm init
npm install -g webpack # 全局安裝依賴
npm install webpack --save-dev #安裝到當前所在的文件夾
2，在文件夾中新建一個文件src，再在src中新建兩個文件如index和components兩個文件，再index中新建index.html文件和index.js文件，在components里面見a.vue（本文以vue框架為例，react同樣也可以），現(xiàn)在文件如下：
項目結(jié)構(gòu).png
index.html文件代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
</html>
3，新建webpack.config.js配置文件
webpack擁有很多功能主要是通過loaders和plugins來實現(xiàn)的（后面會介紹常用的loaders和plugins）。我們主要通過配置webpack.config.js文件來控制webpack。新建webpack.config.js，文件如下：
var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.join(ROOT_PATH, 'src/index'); //__dirname 中的app目錄，以此類推
var APP_FILE = path.join(APP_PATH, 'index.js'); //根目錄文件index.js地址
var BUILD_PATH = path.join(ROOT_PATH, '/public'); //發(fā)布文件所存放的目錄
module.exports = {
// 入口文件
entry: path.join(__dirname, './src/index/index.js'),
// 輸出配置
output: {
// 輸出路徑
path: path.join(__dirname, './public'),
filename: '[name].js'
},
}
現(xiàn)在再命令行輸入webpack
輸入webpack命令.png
這時會發(fā)現(xiàn)項目結(jié)構(gòu)為
項目結(jié)構(gòu).png
好神奇！竟然多了一個public文件。
4，使用webpack構(gòu)建本地服務器 webpack-dev-server
npm install --save-dev webpack-dev-server
(如果安裝了淘寶鏡像，可以用cnpm代替npm這樣安裝速度會快很多）
再webpack.config文件添加命令，如下
var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.join(ROOT_PATH, 'src/index'); //__dirname 中的app目錄，以此類推
var APP_FILE = path.join(APP_PATH, 'index.js'); //根目錄文件index.js地址
var BUILD_PATH = path.join(ROOT_PATH, '/public'); //發(fā)布文件所存放的目錄
module.exports = {
// 入口文件
entry: path.join(__dirname, './src/index/index.js'),
// 輸出配置
output: {
// 輸出路徑
path: path.join(__dirname, './public'),
filename: '[name].js'
},
devServer: {
contentBase: "./public", //本地服務器所加載的頁面所在的目錄
colors: true, //終端中輸出結(jié)果為彩色
historyApiFallback: true, //不跳轉(zhuǎn)
inline: true //實時刷新
}
}
5，按時安裝loaders了
所有的loaders需要單獨安裝并且要再webpack.config文件的配置?？梢杂孟旅娴拇a來安裝loader
npm install xxx-loader --save
或者
npm install xxx-loader --save-dev
安裝依賴項
npm install autoprefixer babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev
css/less/sass
npm install style-loader css-loader less less-loader node-sass sass-loader --save-dev
圖片、字體、json文件依賴
npm install file-loader json-loader url-loader --save-dev
vue依賴
npm install vue-hot-reload-api vue-html-loader vue-loader vue-style-loader vue-template-compiler --save-dev
npm install vue --save
可以根據(jù)自己的項目增加或者刪除loaders
6，Plugins
cnpm install extract-text-webpack-plugin html-webpack-plugin --save-dev
7，webpack.config文件配置
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.join(ROOT_PATH, 'src/index'); //__dirname 中的app目錄，以此類推
var APP_FILE = path.join(APP_PATH, 'index.js'); //根目錄文件index.js地址
var BUILD_PATH = path.join(ROOT_PATH, '/public'); //發(fā)布文件所存放的目錄
module.exports = {
// 入口文件
entry: {
index: APP_FILE
},
// 輸出配置
output: {
// 輸出路徑
path: BUILD_PATH, // 輸出文件的保存路徑
filename: '[name].[hash:5].js' // 輸出文件的名稱
},
resolve: {
extensions: ['', '.js', '.vue', '.scss', '.css'], //后綴名自動補全
alias: {
'Vue': 'vue/dist/vue.js'
}
},
module: {
loaders: [
// 使用vue-loader 加載 .vue 結(jié)尾的文件
{
test: /\.vue$/,
exclude: /^node_modules$/,
loader: 'vue'
}, {
test: /\.json$/,
exclude: /^node_modules$/,
loader: "json"
}, {
test: /\.css$/,
exclude: /^node_modules$/,
loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer'])
}, {
test: /\.scss$/,
exclude: /^node_modules$/,
loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'sass'])
}, {
test: /\.(png|jpg)$/,
exclude: /^node_modules$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
}, {
test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
exclude: /^node_modules$/,
loader: 'file-loader?name=[name].[ext]'
}, {
test: /\.js$/,
exclude: /^node_modules$/,
loader: 'babel'
}
]
},
Favlist: {
loaders: {
js: 'babel'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development') //定義編譯環(huán)境
}
}),
new HtmlWebpackPlugin({ //根據(jù)模板插入css/js等生成最終HTML
filename: './index.html', //生成的html存放路徑，相對于 path
template: './src/index/index.html', //html模板路徑
hash: false,
}),
new ExtractTextPlugin('[name].css')
],
devServer: {
contentBase: "./public", //本地服務器所加載的頁面所在的目錄
colors: true, //終端中輸出結(jié)果為彩色
historyApiFallback: true, //不跳轉(zhuǎn)
inline: true //實時刷新，
}
}
特別注意的是在vue2.0以上版本需要如下設置，不然匯報錯
resolve: {
alias: {
'Vue': 'vue/dist/vue.js'
}
}
ok這是以上的配置，現(xiàn)在我們來做一個簡單的示例吧。
在components新建一個a.vue文件，代碼如下
<template id="template-home">
<div>It is a webpack demo</div>
</template>
<style>
body {
color: red;
backgruond:#ccc;
}
</style>
再index.js中寫入下面代碼：
import Vue from 'Vue'
import Child from '../components/a.vue'
new Vue({
el: '#app',
components: {
'my-component': Child
}
});
index.html代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>webpack-demo</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
</html>
然后在控制臺運行webpack看目錄的變化，然后再運行webpack-dev-server，再瀏覽器打開：localhost:8080
github：https://github.com/sherely/webpack-vue
