最近又在学习JS设计模式了，之前的事情比较杂乱，一会儿跳到mpvue，一会儿是原生小程序之类的，后来从上家公司离职了，这样也能静下心边找工作边学习。
近期是打算看完设计模式，然后再回头去看小程序。所以会坚持先把每天看的设计模式的心得记录下来，再去更新原生小程序的学习心得，最后再是mpvue
搭建环境
这部分内容其实和webpack处的重叠了，之前学习webpack的时候只是简单的记录下来，现在回过头来看，发现webpack其实就是简单的配置，理解了感觉和gulp也差不多(纯配置上来说，当然功能是不一样的，webpack的功能很强大)。
主要的流程就是：
- 初始化npm 环境
- 安装webpack
- 安装webpack-dev-server
- 安装babel
初始化npm环境
npm init
然后一直回车，最后生成一个package.json文件，问你是否要保存这个文件，写yes就行了
此时项目的根目录下就出现了一个package.json文件了。
安装webpack
npm install webpack webpack-cli --save-dev --registry=https://registry.npm.taobao.org
其实到--save-dev 就可以回车了，后面那串是淘宝的镜像地址，为了安装的更快一些而已。
接着去根目录下新建一个webpack.dev.config.js文件，里面写上
// webpack.dev.config.js
module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: './release/bundle.js'
}
}
接着去package.json文件里新添一条命令
新添一条这个命令
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
解释一下：
运行webpack的dev命令，将配置文件指向刚刚创建的webpack.dev.config.js文件，--mode development表示是要求设置一个模式，这里设置为开发者模式，
此时在命令行里敲npm run dev就会是这样子：
绿色表示编译成功
安装webpack-dev-server
npm install webpack-dev-server html-webpack-plugin --save-dev --registry=https://registry.npm.taobao.org
// webpack-dev-server是搭建小型服务器，html-webpack-plugin是生成html文件等插件
然后去根目录创建一个文件叫index.html
写个h5的模板。
这样的模板
现在的目录结构是这样的：
目录结构
【PS：
release文件夹是刚刚执行npm run dev的时候编译出来的】
接下来去修改webpack.dev.config.js文件。
改成这样
devServer是本地开发环境的简单服务器，根目录是从./release目录获取文件，其他的解释如上图。然后再去
package.json里修改dev命令：
image.png
再运行一下npm run dev，此时会自动打开浏览器。
简单解释一下：
plugins：HtmlWebpackPlugin是说新建了一个h5模板，但是也没有引用什么JS，当我们放在这里之后，会将release/bundle.js自动插入到模板中，然后去运行。
devServer: 第一个是配置根目录，然后是是否要自动打开浏览器，port表示打开的端口。
安装babel
npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev --registry=https://registry.npm.taobao.org
新建.babelrc文件在根目录下，然后去文件内这样写：
注意路径
然后再去更改
webpack.dev.config.js：
添加module
【PS：非常重要的一点，我昨天安装的babel-loader是8开头的版本，但是装了之后会报错，然后弄了好久，最后去官网一看】
babel官网
如果安装的是
babel-loader 那么对应的就是@babel/core，如果安装的是babel-core，对应装的就是babel-loader@7
弄完这些之后，去src/index.js里写一段es6的代码，然后npm run dev启动一下，这个时候发现是可以正常编译启动的啦。
网友评论