从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文件就存在了

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180527G1F99O00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券