參考網(wǎng)址
（反正一直失敗）
webpack
(之前在react方面也用過(guò)湘纵，安裝配置很簡(jiǎn)單)
- 全局安裝webpack（自己之前弄過(guò)脂崔，忽略）
$ npm i webpack -g - package.json全局配置文件初始化，描述項(xiàng)目
npm init - 通過(guò)npm安裝項(xiàng)目依賴(lài)項(xiàng)
cnpm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-ru
ntime vue-loader vue-html-loader vue-hot-reload-api css-loader style-loader webpack webpack-dev-server --save-dev
npm install進(jìn)行一次性安裝
安裝vue
cnpm install vue@latest --save
項(xiàng)目目錄初始化梧喷，手動(dòng)新建一些文件夾和文件
在你的項(xiàng)目目錄中去依賴(lài)webpack砌左，使用命令
npm install webpack –save-dev。其中–save：模塊名將被添加到dependencies铺敌，可以簡(jiǎn)化為參數(shù)-S汇歹。 –save-dev: 模塊名將被添加到devDependencies，可以簡(jiǎn)化為參數(shù)-D偿凭。 再去查看package.json产弹，會(huì)發(fā)現(xiàn)多了一項(xiàng)“devDependencies”: { “webpack”: “^1.13.1” }webpack配置開(kāi)始
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, './app'),
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
}
};
//下面的我驗(yàn)證是錯(cuò)誤的
module.exports = {
entry: './app',
output: {
path: './build/',
filename: 'bundle.js'
}
};
index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<script src="./build/bundle.js"></script>
</body>
</html>
接下來(lái),
入口文件index.js:
var h2 = document.createElement('h2');
h2.innerHTML = 'HELLO VUEJS';
document.body.appendChild(h2);
直接在 cmd 中運(yùn)行 webpack ,就能看到頁(yè)面顯示了一個(gè)h2標(biāo)簽,內(nèi)容是 HELLO VUEJS.
自此，簡(jiǎn)單的打包入口文件成js就學(xué)會(huì)了弯囊。
- 使用熱加載webpack-dev-server取视。最大的好處是模塊熱替換，在前端代碼變動(dòng)的時(shí)候無(wú)需整個(gè)刷新頁(yè)面常挚，只把變化的部分替換掉。詳情參考webpack-dev-server 使用命令
npm install webpack-dev-server -g進(jìn)行全局安裝稽物。使用命令webpack-dev-server可以運(yùn)行webpack-dev-server奄毡。[具體參考下面]
安裝 Webpack-dev-server
npm i webpack-dev-server --save-dev
--save-dev會(huì)講安裝后的包放在package.json 的devDependencies,一個(gè)放在dependencies里面, 產(chǎn)品模式用dependencies，開(kāi)發(fā)模式用devDep.
安裝完成之后, 繼續(xù)往 webpack.config.js 中添加配置.
devServe: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
}
再向 package.json 中"script"添加配置
"script": {
"start": "webpack-dev-server --hot --inline"
}
.json 格式的文件里無(wú)論鍵名還是值都必須使用雙引號(hào).
寫(xiě)好之后在cmd 中輸入 npm run start 跑出一串字之后, 打開(kāi) localhost:8080, 就能看到結(jié)果, 然后我們隨意修改一下文本的內(nèi)容保存一下, 會(huì)發(fā)現(xiàn)瀏覽器內(nèi)的文字自動(dòng)地刷新了. MAGIC
