詳解搭建es6+devServer簡單開發環境
阿新 • • 發佈：2018-11-10
搭建基於es6和熱載入的前端簡單開發環境，適合demo類小專案，這樣就不用依賴browsersync等多餘的東西
目錄結構
- /src
- index.js
- index.html
- /dist
安裝依賴
前端精品教程：百度網盤下載
注意版本，尤其是babel，可去babel的npm地址檢視，那裡不會錯
?| 1 2 3 4 5 |
#bebal相關
yarn add babel-core babel-loader babel-preset-env
# webpack相關
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin
|
package.json
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{
"name"
:
"design-pattern"
,
"version"
:
"1.0.0"
,
"description"
:
"js設計模式的學習深入"
,
"main"
:
"index.js"
,
"author"
:
"axin <[email protected]>"
,
"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
前端精品教程：百度網盤下載
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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對應的埠號
}
}
|
.babelrc 可根據需要配置
前端精品教程：百度網盤下載
?| 1 2 3 |
{
"presets": ["env"]
}
|
然後就可以執行npm run dev就可以開啟開發環境