从0开发前后端分离的企业级上线项目-电商平台五

npm的具体用法

如果一个项目需要npm来加载依赖包，那么它就需要npm的初始化，npm初始化需要npm init来完成，当我们输入npm init，这时候会让我们输入一些项目的信息(项目作者，名称之类的)输入完npm后，初始化就完成了，初始化成功后，会在项目的根目录下生成package.json的npm配置文件。

安装npm依赖时可以使用npm install命令在根目录下，建立一个npm modules的包；-g是一个全局安装的一个参数，像webpack这种需要提供webpack全局命令的包，我们就需要全局安装，还有一个是--registy这里是指npm源地址的，如果在国内使用npm-install很慢，就可以指向国内的淘宝源。

npm install

安装依赖包: npm install xxx@v.v.V

卸载依赖包: npm uninstall xxx@v.v.V

参数: -g

参数: --registry=https://registry.npm.taobao.org

Webpack

是一个模块化工具，这里我们跟着官方文档来学

设计思想--require anything

加载方式:各种loader插件

编译方式: commonjs模块-> function类型模块

官方文档: http://webpack.github.io/docs/

Webpack的安装

npm install webpack-g

webpack -v来查看版本号

Webpack安装的疑问

为什么全局安装的时候不用版本号?

这个涉及到npm的加载原理，npm会优先使用项目本地的npm包，如果找不到的时候也会去全局的npm包中找。我们在全局安装中就是为了提供Webpack的命令，而真正用到的还是本地1.15.0的版本，当然你把两个都初始化成1.15.0也是没有问题的。

为什么用1.15.0版本，官网上不是建议升级2.x了?

为了兼容IE8

什么--save-dev？ （把安装包的信息 存放在package.json devDependencies 下面）

entry:js 的入口文件

externals: 外部依赖的声明

output：目标文件

resolve: 配置别名

module: 各种文件 各种loader

plugins： 插件

Webpack Loaders

html: html-webpack-plugin/html-loader

js: babel-loader+babel-preset-es2015

css:style-loader+css-loader

image+font :url-loader

Webpack 常用命令

webpack 异步压缩文件

webpack-p做线上发布时候的压缩打包

webpack--watch 实时监听文件 压缩文件

webpack-dev-server

作用：前端开发服务器

特色：可以在文件改变时，自动刷新浏览器（自动两个字就重要了用了就回不去）

安装：npm install webpack-dev-server--save-dev配置：webpack-dev-server/click?http://localhost:8088实用：webpack-dev-server--port8088--inline

下面我们就开始了：

先初始化

这样我们的初始化就完成了，生成了一个package.json的文件

来我们看一下里面有什么内容：

安装webpack

百度搜索webpack 打开官网

这是坑，大家先看看webpack安装完毕（这是全局安装）

这是本地安装

我们在查看版本号的时候可能会出现这样的错误

安装webpack遇到的一个问题.webpack 4X 后需要安装webpack-cli 请注意需要安装在同一目录这里提示安装 webpack-cli// 是因为到了webpack4, webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli：

//因为上面的webpack是全局安装的,因此这里我们安装weback-cli也是需要全局安装的!

npm install --save-dev webpack-cli -g

这里我后来查看版本号的时候还是4.几坑结束了

所以我又卸载了重新装的，建议大家全局安装也是用1.15.0

这是本地在安装

这样查看版本号就对了

打开sublime，把文件拖进去

在项目的page文件夹下建立index文件夹，在index文件夹下建立index.js和cats.js文件

1.2 index.js文件中配置以下信息，然后保存

1.3 在cats文件中配置以下信息，然后保存

1.4 在项目文件夹下运行命令

然后看app.js中的内容了

注：entry：js的入口文件

output：目标文件

externals：外部依赖的声明

resove：配置别名

module：各种文件，各种loader

plugins：插件

2.2.在项目文件夹下打开gitbash执行‘webpack’命令

这样也就可以了

webpack 对脚本和样式的处理

//sublime 新插件这个插件是会在文件的头部有一些作者的信息啥的（要是用我的以前文章发的链接装不用安，本身就有）

FileHeader

第一步：command+Shift+p

第二步：installPackage

第三步：FileHeader

实用快捷键：command+option+a 然后enter

对样式的处理：

js用什么loader 加载？ 用js的loder

官方文档上的例子中entry 只有一个js ，我们有多个怎么办？

output 里面要分文件夹存放目标文件，怎么设置？

varconfig = {

entry:{

'index': ['./src/page/index/index.js'],

'login': ['./src/page/login/index.js']

},

output: {

path:'./dist',

filename:'app.js'

}

};

module.exports= config;

在page目录下创建login文件夹创建index.js

然后把index文件夹中的cat.js删除

然后看app.js中就会有内容了

但是没有hello index

就是因为 hello login把hello index覆盖了

如何解决·？

将filename:'app.js'换成

filename:'[name].js'

这样就会多出两个文件

如果想文件分类存放，js文件放到js文件夹下

filename:'js/[name].js'

执行webpck就能看见了

jquery 引入方法？

npm install jquery--save

var$=require('jquery');

这里可以自己设置一个测试的test.html来测试（具体我就不演示了）

$('body').html('Hello jQuery'）//这种方式是可以的 但是只是局部不是全局

npm uninstall jquery--save

http://www.bootcdn.cn/jquery/打开这个网站（百度 jQuery cdn就可以看到了）src引入的一定要在里面找2.0以下的兼容IE8

//全局安装jquery 在index.html 中引入//在全局引入的基础上 模块化引入jquery

externals : {

'jquery':'window.jQuery'

}

//单页面 模块化引入var$$=require('jquery');

$$('body').html('hello jquery 这里是全局的函数');

我想提取公共模块 怎么处理？

使用这个CommonsChunkPlugin组件（网上找官网的地址）

varwebpack =require('webpack');

entry:{

'common': ['./src/page/common/index.js'],

'index': ['./src/page/index/index.js'],

'login': ['./src/page/login/index.js']

},

plugins:[

// 独立通用模块到js/base.js

newwebpack.optimize.CommonsChunkPlugin({

name :'commons',

filename :'js/base.js'

})

]

对样式的处理：

样式使用怎样的loader？

webpack打包的css怎么独立成单独的文件？

在page下新建一个common文件夹，我们可以把通用的代码放在这里

用CommonschunkPlugin这个插件

varExtractTextPlugin =require('extract-text-webpack-plugin');

module: {

loaders: [

{ test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") }

]

},

plugins: [

// 独立通用模块到js/base.js

newwebpack.optimize.CommonsChunkPlugin({

name:'common',

filename:'js/base.js'

}),

// 把css单独打包到文件里，不在js中

newExtractTextPlugin("css/[name].css")

]

安装loader

检查一下

最后css文件就存在了