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