从0到上线开发企业级电商项目_前端_08_项目脚手架搭建-npm&webpack

一、脚手架搭建概要

1.

npm init   //npm 初始化

 

->输入参数

->会生成package.json，所有的npm信息都会在里面。

 

2.npm基本操作

npm install xxx@v.v.v                     //安装依赖包
npm uninstall xxx@v.v.v                   //卸载依赖包
-g                                        //参数:全局
–registry=hrrps://registy.npm.taobao.org  //参数：指定npm源

 

3.Webpack

设计思想：require anything

加载方式：各种loader插件

编译原理：commonjs模块 -> function类型模块

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

4.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文件中。不会打包进业务代码。

 

5.webpack.config.js 

是webpack的核心内容，webpack对各种文件的处理方式都是在这里面配置的，最终的输出是一个json形式的配置文件。

entry：js的入口文件

externals：外部依赖的声明

output：目标文件

resolve：配置别名

module：各种文件，各种loader

plugins：插件

6.Webpack loader

html: html-webpakc-plugin

js: babel-loader

css: style-loader + css-loader

image+font: url-loader

7.Webpack常用命令

webpack                            打包，常用于调试代码
webpack -p                         用于线上发布时的打包，会把所有的文件都做最小化压缩。
webpack –config webpack.config.js  改变默认的配置文件位置

 

8.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初始化

1.npm初始化

cd进入到项目目录

npm init          //填写相关需要的东西再yes

ls;               //可以看到这个时候已经生成了package.json

cat package.json; //查看刚才的内容已经进入到package.json中

 

2.安装全局 webpack

接下来进入webpack官网，点击左方usage，

根据官方文档进行安装和配置，这里直接给出代码，直接根据代码一步一步的进行也可完成。注意如果使用的是linux或者mac要加sudo权限。

npm install webpack -g

注意这里有可能会因为一些原因出错，查看出错的文件可以帮助我们解决掉大部分问题。另外，如果使用windows操作不成功则需要安装一个python，如果还是失败的话我们尝试指定版本号：

npm install webpack@1.15.0 -g

 

3.安装本地webpack

接下来在本地也安装一个webpack依赖，防止部署环境与本地依赖包版本不一样造成错误。

npm install webpack@1.15.0 –save-dev

 

4.安装完成检验

可以执行webpack -v来查看当前的版本

执行ls可以看到我们的项目目录下多了node_modules，进入该目录执行ls看到刚才的webpack就是装在这里，到此我们的webpack安装就完成了，

接下来进行配置。

4.命令行模式进行配置

进入项目目录，项目目录的建立参考http://bingxiong.duapp.com/index.php/2017/09/16/qian6/在page下建一个文件夹index，在建立两个文件为cats.js和index.js 分别粘上官方给的示例，如下

cats.js

var cats = [‘dave’, ‘henry’, ‘martha’];
module.exports = cats;

index.js

cats = require(‘./cats.js’);
console.log(cats);

 

在terminal输入

webpack ./src/page/index/index.js ./dist/app.js

 

文件夹，看到生成了dist，并且有app.js。这就是一个webpack打包好的模块。由于没有用-p，因此这个文件是没有压缩的。

以上我们用的是命令行模式来配置，这种方式只能配置一个入口文件和一个目标文件，无法配置其他高级功能，因此我们将用使用webpack.config.js来配置参数再进行打包。我们将根据官方文档完成基本配置。

5.webpack.config.js来进行配置

在根目录下新建webpack.config.js文件并写入，这里要注意的是不能直接从官方文档复制，要进行目录更改。

module.exports = {
    entry: './src/page/index/index.js',
    output: {
        path: './dist',
        filename: 'app.js'
    }
};

 

在命令行执行webpack，看到已经打包成功。

 

 

 

 

分类：前端开发

发布于2017年9月18日

webpack对脚本和样式的处理

通过阅读本文你可以解决以下几个问题：

  1. 对脚本的处理
  • JS用什么loader来加载？
  • 官方文档上的例子entry只有一个js，我们有多个怎么办
  • output里要分文件夹存放目标文件，怎么设置？
  • jQuery引入方法？
  • 想提取出程序里的公共模块应该怎么处理？

2. 对样式的处理

  • 样式用什么loader？
  • webpack打包的css怎么独立成单独的文件

接下来我们就在实际操作中解决这些问题，项目的开发目录构架请参考之前文章，我是在已完成之前工作的情况下进行操作的，如果有自己的项目，可以通过阅读本文中的方法来做参考。在开发之前我们现在sublime安装一个插件，fileheader，这个插件的作用是在开始之前加一些说明，比如创建时间作者之类的。现在让我们开始。

首先对webpack的配置文件进行改造成

[code]

var config = {
entry: ‘./src/page/index/index.js’,
output: {
path: ‘./dist’,
filename: ‘app.js’
}
};
module.exports = config;

[/code]

  • js用什么来加载

官方提供了两种方法，一是webpack本身就可以支持js加载，另一种是Babel来加载再用polifile来做兼容性适配，但是第二种方法不能兼容IE8，所以这里我们采用webpack本身对js的加载器，即我们并不需要安装js的loader。

  • js的多入口处理方法

将entry目前是个字符串，我们将其修改成一个对象，地址是一个数组的方式来解决这个问题，这在webpack中是支持的。

[code]

entry: {
‘index’ : [‘./src/page/index/index.js’],
‘login’ : [‘./src/page/login/index.js’],
},

[/code]

然后在page里面建立一个login里面包含一个index.js，
用一个标记性的字符串
来测试刚才的结果。

[code]
console.log(‘hello login’);
[/code]

同样，把之前的index文件夹下的indes.js也改掉

[code]
console.log(‘hello index’);
[/code]

之前的cats.js之后不会用了可以删除了。
使用webpack看到打包成功
打包完成后进入app.js看到了hello login，但是没有看到hello index，说明index没有进来，
这个的原因是在webpack.config.js文件中虽然有了两个entry但是output只有一个，这就出现了第三个问题。

  • 如何配置输出文件？

进入app.js将output改为

[code]

output: {
path: ‘./dist’,
filename: ‘[name].js’
}

[/code]

[name]是filename里支持的一个方法，可以按照源文件名字打包。

可以看到dist文件夹里已经有我们想要的文件了

但是我们看到app.js还在这里，而我们的配置文件中现在并没有这项之前的配置了，这是webpack的一个问题，webpack在配置的时候不会清除掉之前打包的文件。因此需要把dist文件夹删了重新打包。实现了效果之后我们注意到了一个问题，我们在开发中是希望不同类型的文件在不同的文件夹下，接下来我们说说这一点要怎么做到。

  • 分文件夹存放目标文件

在filename中是支持路径的因此我们修改配置加上路径。

[code]

output: {
path: ‘./dist’,
filename: ‘js/[name].js’
}

[/code]

再执行webpack 我们看到之前的两个文件已经去到了dist下的js文件夹，完成了不同类型文件放置于不同文件夹的功能，这就是我们想要的。

  • jQuery该如何引用

首先在view下建立一个测试用的index.html页面引入js

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

</head>
<body>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22..%2F..%2Fdist%2Fjs%2Findex.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>

[/html]

进入浏览器打开调试工具看到hello index，说明脚本已经引入进来了。

如果没有安装jQuery就安装一下

[code]

npm install jquery –save

[/code]

现在使用一下jquery，page/index/index.js修改为

[code]

var $ = require(‘jquery’);

$(‘body’).html(‘HELLO INDEX’);
console.log(‘hello index’);

[/code]

webpack一下打开浏览器，刷新刚才的文件，可以看到HELLO INDEX就出来了，这就说明现在我们已经引入了jquery。但是还有两个问题待解决，1.如果以这种方式引入，那么每个文件的前面都需要引入。2.有的jquery插件依赖的是全局的jquery对象，而以变量形式加载的jquery是没有办法放在插件里使用的。接下来我们开始解决这两个问题。

另一种方式是直接在脚本下面引入jquery CDN，可以在这里找www.bootcdn.cn/jquery/,这里我建议选择2.0以下的版本，因为2.0以上的版本对IE8不支持，这样就是一个全局的jquery了。另外说明一下，用”//”的形式来加载静态资源，表示的是省略请求方式，如果在http或https下会自动补全成http://…或https://…，由于我们要加载外部的资源并且是使用文件的形式查看的所以我们要用全路径。在page -> view -> index.html中加上：

[javascript]

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

[/javascript]

接下来进行测试，在page -> index -> index.js引用jquery，即:

[code]

$(‘body’).html(‘HELLO INDEX~~~’);
console.log(‘hello index’);

[/code]

执行webpack，后打开浏览器看到执行成功！
那么如何使用模块化的方式该如何引用jquery呢？
首先在webpack.config.js中加上external字段

[code]
var config = {
entry: {
‘index’ : [‘./src/page/index/index.js’],
‘login’ : [‘./src/page/login/index.js’],
},
output: {
path: ‘./dist’,
filename: ‘js/[name].js’
},
externals : {
‘jquery’ : ‘window.jQuery’
}
};
module.exports = config;
[/code]

在index->index.js中修改

[code]
</pre>
var $$ = require(‘jquery’);

$$(‘body’).html(‘HELLO INDEX~~~’);
console.log(‘hello index’);

[/code]

刷新页面我们发现刚才的HELLO INDEX~~~~~还是生效的。

  • 如何创建公共模块？

CommonsChunkPlugin使我们需要用到的模块，进入它的github看到官方用法说明。我们复制一下new语句添加到配置文件中，现在做到这一步配置文件的完整代码是：

[code]

var webpack = require(‘webpack’);
var config = {
entry: {
‘index’ : [‘./src/page/index/index.js’],
‘login’ : [‘./src/page/login/index.js’],
},
output: {
path: ‘./dist’,
filename: ‘js/[name].js’
},
externals : {
‘jquery’ : ‘window.jQuery’
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name : ‘commons’,
filename : ‘js/base.js’
})
]
};
module.exports = config;

[/code]

之后我们webpack一下，看到base.js已经进到dist中了，接下来我们来测试一下效果，在page中新建一个module.js

[code]

module.exports = {
test:1234
}

[/code]

再page -> index -> index.js 改为

[code]

require(‘../module.js’);

[/code]

再page -> login -> index.js 改为

[code]

require(‘../module.js’);

[/code]

webpack一下后进入base.js，这是我们刚才设定的通用模块的放置位置。进入后看到已经这个通用的组建进来了。

  • 全局模块处理通用逻辑

接下来我们还需要一个全局的模块来处理一些通用的逻辑，比如说全局样式的引入和一些全局的处理、统计之类的。全局模块最简单的方法是在每个页面都引用一下，但是这样会很麻烦，每个页面都要多引用一个东西。

在page中新建的common文件夹，其下创建一个common.js。

[code]

console.log(‘i am global’);

[/code]

修改配置文件在entry下添加common在plugins下添加name:’common’：

[code]

 

var webpack = require(‘webpack’);
var config = {
entry: {
‘common’: [‘./src/page/common/index.js’],
‘index’ : [‘./src/page/index/index.js’],
‘login’ : [‘./src/page/login/index.js’],
},
output: {
path: ‘./dist’,
filename: ‘js/[name].js’
},
externals : {
‘jquery’ : ‘window.jQuery’
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name : ‘common’,
filename : ‘js/base.js’
})
]
};
module.exports = config;

[/code]

执行webpack后看到dist下的base.js中’i am global’已经被加载进来了。到这里我们通用模块的配置就已经完成了。这种方法即优化了加载速度又能够提供全局的模块还免去了在每个页面中的require。这样webpack对脚本处理的问题就全部解决了。

接下来我们看看webpack对样式的处理还有什么问题？

  • 处理样式使用什么loader？

首先新建一个样式文件page -> index -> index.css

[code]

body{
background: #ccc;
}

[/code]

在page -> index -> index.js 引入刚才写的样式

[code]

require(‘./index.css’);
require(‘../module.js’);

[/code]

在webpack.config.js中加上module：

[code]

 

var webpack = require(‘webpack’);
var config = {
entry: {
‘common’: [‘./src/page/common/index.js’],
‘index’ : [‘./src/page/index/index.js’],
‘login’ : [‘./src/page/login/index.js’],
},
output: {
path: ‘./dist’,
filename: ‘js/[name].js’
},
externals : {
‘jquery’ : ‘window.jQuery’
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name : ‘common’,
filename : ‘js/base.js’
})
]
};
module.exports = config;

[/code]

可以看到我们将在module中使用的是style loader和css loader，!连接两个loader，这个的意思是做两个loader的串联，执行顺序是从右往左，即会先执行css loader然后再用执行的结果执行style loader。接下来我们安装这两个loader并检查一下安装结果，注意开发工具的安装在后面加上–dev，在terminal中输入

[code]

npm install css-loader style-loader –save-dev

ls

cat package.json

[/code]

我们可以看到css和style loader都以安装好了。执行一下webpack，看到执行成功。

接下来我们看一下css被打包到了哪里。

dist -> js -> index.js

看到css被当成了一个字符串放在js中来处理，这样虽然能够将css做模块化，但另一问题是，我们这里使用js来加载的css需要等待js加载完毕后才能够加载进来，这样会导致在加载的时候可能会出现一段空白样式的时间，这是不太能够接受的。因此我们想办法将它放到一个单独的css文件中，使用link的形式来加载。这里我们将使用extract-text-webpack-plugin插件来解决这个问题，首先我们需要进行插件的安装，网上一些教程使用的是

[code]
<pre class="hljs undefined"><code>npm install extract-text-webpack-plugin –save-dev</code></pre>
[/code]

执行后可以看到报错了

这是因为在npm 3以上的版本不再自动寻找依赖而是需要我们自己找到合适的包，对于我们来说该如何去找这么多的插件和loader呢？我们进入这个插件的github中看一下版本历史。

我们这里选择v1.0.1,看到安装成功了我们修改一下配置文件：

[code]

var webpack = require(‘webpack’);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var config = {
entry: {
‘common’: [‘./src/page/common/index.js’],
‘index’ : [‘./src/page/index/index.js’],
‘login’ : [‘./src/page/login/index.js’],
},
output: {
path: ‘./dist’,
filename: ‘js/[name].js’
},
externals : {
‘jquery’ : ‘window.jQuery’
},
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") }
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name : ‘common’,
filename : ‘js/base.js’
}),
new ExtractTextPlugin("css/[name].css"),
]
};
module.exports = config;

[/code]

再执行webpack，看到dist下面已经有了刚才配置的css文件夹，刚才的background已经被打包进来了。在js中也搜索不到background了，说明已经打包成功了。

在view -> index.html下应用一下css看一下效果，需要更改一下代码来引入

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../../dist/css/index.css">
<title></title>

</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="../../dist/js/base.js"></script>
<script type="text/javascript" src="../../dist/js/index.js"></script>
</body>
</html>

[/html]

如果用的sublime的话，右键空白区域，open in browser打开浏览器看到背景已经变成灰色了，ctrl+i可以看到i am global也进来了

发布于2017年9月17日

项目脚手架搭建-npm&webpack

第一部分：脚手架搭建概要

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进入到项目目录

posted @ 2017-12-30 16:07  shirayner  阅读(555)  评论(0)    收藏  举报