从0到上线开发企业级电商项目_前端_02_项目脚手架搭建-npm&webpack
一、npm install
安装依赖包：
npm install xxx@v.v.v
卸载依赖包：
npm uninstall xxx@v.v.v
参数：
-g //指定全局安装
--registry=https://registry.npm.taobao.org //将源指向淘宝源
参考资料：
3.如何发布npm包
第一部分：脚手架搭建概要
npm init //npm初始化
->输入参数
->会生成package.json，所有的npm信息都会在里面。
npm基本操作
- 安装依赖包：npm install xxx@v.v.v
- 卸载依赖包：npm uninstall xxx@v.v.v
- 参数：-g
- 参数：–registry=hrrps://registy.npm.taobao.org //指定npm源
Webpack
设计思想：require anything
加载方式：各种loader插件
编译原理：commonjs模块 -> function类型模块
官方文档：http://webpack.github.io/docs/
Webpack的安装
- npm install webpack -g
- npm install webpack@1.15.0 –save-dev
- webpack -v
三个问题：
1.全局安装为什么不用版本号，安装项目依赖的时候则使用？
npm会优先使用项目本地的npm包，如果找不到的时候才会去全局的npm包里找，全局安装只是为了提供webpack的命令，而真正用到的还是本地的1.15.0的版本。
2.为什么用1.15.0而不用官网上建议的2.x？
2.x版本中用于压缩js的文件有问题，IE8不支持
3.什么是–save-dev？
npm会把包的信息放在package.json里，这样就能记录项目的依赖了，通过这个命令安装后包的名称和版本都会存在package.json文件中。不会打包进业务代码。
webpack.config.js
是webpack的核心内容，webpack对各种文件的处理方式都是在这里面配置的，最终的输出是一个json形式的配置文件。
- entry：js的入口文件
- externals：外部依赖的声明
- output：目标文件
- resolve：配置别名
- module：各种文件，各种loader
- plugins：插件
Webpack loader
- html: html-webpakc-plugin
- js: babel-loader
- css: style-loader + css-loader
- image+font: url-loader
Webpack常用命令
- webpack 打包，常用于调试代码
- webpack -p 用于线上发布时的打包，会把所有的文件都做最小化压缩。
- webpack –config webpack.config.js 改变默认的配置文件位置
webpack-dev-server
- 作用：前端开发服务器，使用户可以使用localhost的形式来访问项目
- 特色：可以在文件改变时，自动刷新浏览器。
- 安装：npm install webpack-dev-server –save-dev
- 配置：webpack-dev-server/client?http://localhost:8088
- 使用：webpack-dev-server –port 8088 –inline
第二部分：npm和webpakc初始化
cd进入到项目目录
[code]
npm init //填写相关需要的东西再yes
ls; //可以看到这个时候已经生成了package.json
cat package.json //查看刚才的内容已经进入到package.json中
[/code]
接下来进入webpack官网，点击左方usage，根据官方文档进行安装和配置，这里直接给出代码，直接根据代码一步一步的进行也可完成。注意如果使用的是linux或者mac要加sudo权限。
[code]
npm install webpack -g
[/code]
注意这里有可能会因为一些原因出错，查看出错的文件可以帮助我们解决掉大部分问题。另外，如果使用windows操作不成功则需要安装一个python，如果还是失败的话我们尝试指定版本号：
[code]
npm install webpack@1.15.0 -g
[/code]
接下来在本地也安装一个webpack依赖，防止部署环境与本地依赖包版本不一样造成错误。
[code]
npm install webpack@1.15.0 –save-dev
[/code]
可以执行webpack -v来查看当前的版本
执行ls可以看到我们的项目目录下多了node_modules，进入该目录执行ls看到刚才的webpack就是装在这里，到此我们的webpack安装就完成了，接下来进行配置。
进入项目目录，项目目录的建立参考http://bingxiong.duapp.com/index.php/2017/09/16/qian6/在page下建一个文件夹index，在建立两个文件为cats.js和index.js分别粘上官方给的示例，如下
cats.js如下
[code]
var cats = [‘dave’, ‘henry’, ‘martha’];
module.exports = cats;
[/code]
index.js如下
[code]
cats = require(‘./cats.js’);
console.log(cats);
[/code]
在terminal输入
[code]
webpack ./src/page/index/index.js ./dist/app.js
[/code]
文件夹，看到生成了dist，并且有app.js。这就是一个webpack打包好的模块。由于没有用-p，因此这个文件是没有压缩的。
以上我们用的是命令行模式来配置，这种方式只能配置一个入口文件和一个目标文件，无法配置其他高级功能，因此我们将用使用webpack.config.js来配置参数再进行打包。我们将根据官方文档完成基本配置。
在根目录下新建webpack.config.js文件并写入，这里要注意的是不能直接从官方文档复制，要进行目录更改。
[code]
module.exports = {
entry: ‘./src/page/index/index.js’,
output: {
path: ‘./dist’,
filename: ‘app.js’
}
};
[/code]
在命令行执行webpack，看到已经打包成功。
