[React/MacOS下安装webpack4.0]

因刚接触前端框架React，发现生产环境打包编译必须要通过一些编译工具来打包;
今天安装的的正是React的好搭档WebPack：

环境如下：

MacOS的的操作系统
nodeV8.9.4 3.
npm V5.6.0
WebPack V4.0.1
WebPack我们用npm去安装,npm依赖于node

webpack依赖于node和npm明白以上几点我们开始安装，因之前有一些版本导致安装之后出现好多问题，这边插入一下简单完全之前旧版本清理节点的方法：

sudo -s / /切换root管理员 rm -rf /usr/local/{bin/{nodenpm},lib/node_modules/npm,/lib nodeshar/man/*/node*} //删除所有节点的相关数据文件 rm -rf /usr/local/bin/webpack //删除的WebPack软连接 rm -rf /usr/local bin/web-dev-server

下载开始安装的WebPack：

1：安装节点http://nodejs.org/访问url下载目前稳定版本8.9.4node安装操作全部是pkg可视化完成！
这里写图片描述

2：安装之后npm默认会安装上我们查看一下npm版本！

这里写图片描述

创建一个空文件夹用于测试
mkdir webpack 

cd webpack 

npm install webpack -g //全局安装webpack 

npm init //输入之后会提示你输入一些信息默认按回车就行，但是有一点必须要注意第一项package name：这个默认是你当前目录名字，我们当前目录是webpack不允许你写这个名字，你可以随便写一个其他的名字，最后一步，输入yes完成之后当前文件夹生成package.json文件

npm install webpack --save-dev //下载webpack依赖--save-dev表示将依赖添加到package.json中的'devDependencies'对象中

npm install install webpack -cli -D -g //安装webpack依赖

npm install webpack-cli -D -g //安装的WebPack依赖纱增加的WebPack-CLI -D -g ```

以上的WebPack安装完成，查看版本！

这里写图片描述

4：配置文件方式使用简单测试：
“`
在当前文件夹中创建webpack.config.js输入以下内容：
var path = require(‘/Users/helloyuyang/Python/JavaScript/react/webpack’)
module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘index.js’,
path: ‘/Users/helloyuyang/Python/JavaScript/react/webpack/dist/’
},
resolve: {
extensions: [‘.js’, ‘.es6’, ‘.vue’]
}
}

保存执行：webpack
这里写图片描述

[React/MacOS下安装webpack4.0]

猜你喜欢