搭建基于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"
,
"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就可以开启开发环境
扫描二维码关注公众号，回复：
3616725 查看本文章
