版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Dj_Fairy/article/details/86541265
搭建开发环境分成以下几块
- 初始化npm环境
- 安装webpack
- 安装webpack-dev-serve
- 安装babel
下面开始详细介绍:
首先保证电脑要安装nodejs,可以从官网下载,查看node版本
一、初始化npm环境
新建一个空的文件夹(我的是design),接下来执行命令npm init,然后一直回车就可以了,在文件中就可以看到package.json文件夹了
二、安装webpack
1)输入命令行 (安装完成后注意版本号,版本号不对应可能会报错)
npm install webpack webpack-cli --save-dev
2)、在根目录里新建文件夹src,在src下面新建index.js文件(随便输点内容,一会儿测试用);
在根目录下新建webpack.dev.config.js文件
3)、在webpack.dev.config.js里输入以下内容
module.exports = {
entry: './src/index.js', //入口文件
output: { //出口文件
path: __dirname,
filename: './release/bundle.js'
}
}
4)、修改package.json文件中的内容
在scripts里面加上
"dev": "webpack --config ./webpack.dev.config.js --mode development"
到这里上面的第二大步webpack就算安装完成了,执行npm run dev文件中会有release文件生成。
三、安装webpack-dev-serve
1)、在命令行中输入
npm install webpack-dev-server html-webpack-plugin --save-dev
2)、在跟文件下新建index.html文件,在里面输入h5内容
3)、修改webpack.dev.config.js文件,修改如下图所示
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: './release/bundle.js'
},
plugins: [ //模板
new HtmlWebpackPlugin({
template: './index.html'
})
],
devServer: {
contentBase: path.join(__dirname, './release'), //根目录
open: true, //自动打开浏览器
port: 9000 //端口
}
}
4)修改package.json文件里的dev,将webpack修改为webpack-dev-server
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
到这里第三步就搭建好了,执行npm run dev看效果
四、安装babel
主要目的是解析es6
1)安装插件
npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev
2)在根目录下新建.babelrc文件
在文件中写
{
"presets": ["es2015","latest"],
"plugins": []
}
3)修改webpack.dev.config.js文件,在文件中加入
module: {
rules: [{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
}]
},
到这里以上环境就完全开发好了,想要编写的东西在index.js里面就可以写了。