詳解搭建es6+devServer簡(jiǎn)單開(kāi)發(fā)環(huán)境
更新時(shí)間：2018年09月25日 11:21:55 作者：axin
這篇文章主要介紹了詳解搭建es6+devServer簡(jiǎn)單開(kāi)發(fā)環(huán)境，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
搭建基于es6和熱加載的前端簡(jiǎn)單開(kāi)發(fā)環(huán)境，適合demo類小項(xiàng)目，這樣就不用依賴browsersync等多余的東西
目錄結(jié)構(gòu)
- /src
- index.js
- index.html
- /dist
安裝依賴
注意版本，尤其是babel，可去babel的npm地址查看，那里不會(huì)錯(cuò)
#bebal相關(guān) yarn add babel-core babel-loader babel-preset-env # webpack相關(guān) yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin
package.json
{
"name": "design-pattern",
"version": "1.0.0",
"description": "js設(shè)計(jì)模式的學(xué)習(xí)深入",
"main": "index.js",
"author": "axin <laputacloud@163.com>",
"license": "MIT",
"scripts": {
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
},
"dependencies": {},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "7",
"babel-preset-env": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
}
}
webpack.dev.config.js
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: './dist/bundle.js'
},
module: {
rules: [{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
}]
},
plugins: [
new htmlWebpackPlugin({
template: './index.html'
})
],
devServer: {
contentBase: path.join(__dirname, './dist'),
open: true, // 自動(dòng)打開(kāi)瀏覽器
port: 6688, // devServer對(duì)應(yīng)的端口號(hào)
}
}
.babelrc 可根據(jù)需要配置
{
"presets": ["env"]
}
然后就可以執(zhí)行npm run dev就可以開(kāi)啟開(kāi)發(fā)環(huán)境
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
鼠標(biāo)選擇動(dòng)態(tài)改變網(wǎng)頁(yè)背景顏色的JS代碼
這篇文章主要介紹了鼠標(biāo)選擇動(dòng)態(tài)改變網(wǎng)頁(yè)背景顏色的JS代碼，有需要的朋友可以參考一下2013-12-12
IE6-IE9不支持table.innerHTML的解決方法分享
讓ie6-ie9支持table.innerHTML，其實(shí)這里只是對(duì)table做了處理，對(duì)其他不支持的元素可以用類似的方案2012-09-09
這篇文章主要為大家詳細(xì)介紹了js html制作簡(jiǎn)單日歷的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
js自動(dòng)生成的元素與頁(yè)面原有元素發(fā)生堆疊的解決方法
商品屬性和商品規(guī)格是js動(dòng)態(tài)生成的元素，商品擴(kuò)展信息的兩個(gè)文本框是原有的元素，他們發(fā)生堆疊，下面是一些解決思路2014-09-09
在IE和VB中支持png圖片透明效果的實(shí)現(xiàn)方法(vb源碼打包)
在IE和VB中支持png圖片透明效果的實(shí)現(xiàn)方法(vb源碼打包)，需要的朋友可以參考下。2011-04-04
JavaScript使用Math.random()生成簡(jiǎn)單的驗(yàn)證碼
今天小編就為大家分享一篇關(guān)于JavaScript使用Math.random()生成簡(jiǎn)單的驗(yàn)證碼，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
淺談webpack打包生成的bundle.js文件過(guò)大的問(wèn)題
下面小編就為大家分享一篇淺談webpack打包生成的bundle.js文件過(guò)大的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了javascript繼承體系的相關(guān)資料,需要的朋友可以參考下2017-10-10
javascript中的糖衣語(yǔ)法Promise對(duì)象詳解
這篇文章主要介紹了javascript中的糖衣語(yǔ)法Promise對(duì)象詳解,Promise 對(duì)象代表了未來(lái)將要發(fā)生的事件，用來(lái)傳遞異步操作的消息，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對(duì)基本類型和引用類型的理解深度,這篇文章主要給大家介紹了關(guān)于js深拷貝和淺拷貝的相關(guān)資料,需要的朋友可以參考下2022-10-10