webpack(一)

webpack是在应用程序中构建JavaScript模块的工具。 要从cli或api开始使用webpack，请按照安装说明进行操作。
webpack通过快速构建应用程序的依赖图并按正确的顺序绑定它们来简化您的工作流。 webpack可以配置为定制您的代码的优化，
拆分供应商/ css / js代码生产，运行开发服务器热重装代码，
没有页面刷新和许多这样酷的功能。 进一步了解为什么要使用webpack。

index.js依赖于lodash在运行之前包含在页面中。 它是隐式的，因为index.js从来没有声明需要lodash; 它只是假定一个全局变量_存在。

这样管理JavaScript项目有一些问题：

如果依赖项丢失，或者包含在错误的顺序中，应用程序将不会运行。
如果包括一个依赖，但没有使用，那么浏览器必须下载很多不必要的代码。

要将lodash依赖与index.js绑定，我们需要先安装lodash

npm install –save lodash

这里，index.js显式地要求lodash存在，并将其绑定为_（没有全局范围污染）。

通过说明模块需要的依赖关系，webpack可以使用此信息来构建依赖关系图。 然后使用图形生成优化的捆绑包，其中脚本将以正确的顺序执行。 此外，未使用的依赖关系不会包含在捆绑包中。

现在，在此文件夹上运行webpack，index.js作为条目文件，bundle.js作为输出文件，其中包含页面所需的所有代码。

在浏览器中打开index.html以查看成功捆绑的结果。 您应该看到一个包含以下文本的页面：’Hello webpack’。

注意使用ES2015模块导入（别名ES2015，和谐）在app / index.js？ 尽管浏览器不支持导入/导出语句，但是使用它们是很好的，因为webpack将用ES5兼容的包装代码替换这些指令。 检查dist / bundle.js以说服自己。

注意，除了import / export外，webpack不会接触你的代码。 如果您使用其他ES2015功能，请确保使用转换器，如Babel或Bublé。

对于更复杂的配置，我们可以使用webpack可以引用的配置文件来捆绑代码。 创建webpack.config.js文件后，您可以使用以下配置设置表示上述CLI命令。

配置文件允许使用webpack的所有灵活性。 我们可以使用此配置文件添加加载器规则，插件，解析选项和许多其他增强功能。

考虑到从CLI这样运行webpack不是特别有趣，我们可以设置一个小捷径。 像这样调整package.json：

现在可以通过使用npm run build命令实现与上面相同的功能。 npm通过它来拾取脚本，并临时修补环境，以便它包含bin命令。 你会在很多项目中看到这个约定。

在开始之前，请确保您安装了新版本的Node.js。 当前LTS是理想的起点。 您可能遇到与旧版本的各种问题，因为它们可能缺少Webpack或相关的软件包可能需要的功能。

下一节将介绍如何在项目中本地安装webpack。

本地安装
如果在项目中使用npm脚本，npm将尝试在您的本地模块中查找webpack安装，这种安装技术对其有用。

全局安装

这些选项由单个选项resolve.modules替换。 请参阅解决更多使用。

此选项不再需要传递空字符串。 此行为已移至resolve.enforceExtension。 请参阅解决更多使用。

更多的东西在这里改变。 未详细列出，因为它不常用。 请参阅解决详细信息。

旧的加载器配置被一个更强大的规则系统取代，允许配置加载器和更多。 出于兼容性原因，旧的module.loaders语法仍然有效，并且旧的名称被解析。 新的命名约定更容易理解，并且是将配置升级为使用module.rules的一个很好的理由。

         +-------------------------------------+
         | Home Repos About                    | <- App
         +------+------------------------------+
         |      |                              |
Repos -> | repo |  Repo 1                      |
         |      |                              |
         | repo |  Boxes inside boxes          |
         |      |  inside boxes ...            | <- Repo
         | repo |                              |
         |      |                              |
         | repo |                              |
         |      |                              |
         +------+------------------------------+

entry：
它定义了打包的入口文件，数组中的文件会按顺序进行，并且它会自行解决依赖问题

在这里其实我们还定义了Webpack开发服务器，webpack-dev-server，
我们可以在package.json文件中看到：

1 “scripts”: {
2 “start”: “webpack-dev-server –hot –progress –colors”,
3 “build”: “webpack –progress –colors”
4 },

output：

它定义了输出文件的的位置，包括路径，文件名，还可能有运行时的访问路径（publicPath）参数

module：

webpack将所有的资源都看做是模块，而模块就需要加载器：

对于不同的文件，我们可以自行配置使用不同的加载器

配置了babel-loader，可以让我们在js文件中随心所欲的开始写ES6规范的代码。

{ test: /.js$/, exclude: /node_modules/, loader: ‘babel-loader’},

Webpack的加载器之间可以进行串联，一个加载器的输出可以成为另一个加载器的输入。
比如LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，
从而运行时可以通过style标签将其应用到最终的浏览器环境。

{test: /.less/,loader: ‘style-loader!css-loader!less-loader’}

resolve：
Webpack 是使用类似 Browserify 的方式在本地按目录对依赖进行查找。

resolve属性中的extensions数组中用于配置程序可以自行补全哪些后缀。
比如说我们要require一个common.js文件，添加了这个配置我们只要写：require(‘common’)；就可以了。

plugin:
我们可以在plugin参数中配置我们需要用到的各种各样的插件

---

npm install html-webpack-plugin –save-dev //添加我们的插件 会自动生成一个html文件

现在开始配置webpack，目标是把这两个js文件合并成一个文件.
我们可以自己在build文件夹里面手动建一个index.html文件夹，
然后再把合并以后的js引用在里面，但是这样有些麻烦，
所以我们这里安装一个plugin，可以自动快速的帮我们生成HTML。

entry :
//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字

//new HtmlwebpackPlugin({ title: ‘Hello World app(自动创建index.html的插件)’})

loaders: [
  {test: /\.css$/, loader: 'style-loader!css-loader',include: APP_PATH}
]

看loaders的书写方式，test里面包含一个正则，包含需要匹配的文件，loaders是一个数组，
包含要处理这些程序的loaders，这里我们用了css和style，注意loaders的处理顺序是从右到左的，
这里就是先运行css-loader然后是style-loader.

将一些图片自动转成base64编码的，为你减轻很多的网络请求。

npm install url-loader –save-dev

---

添加ES6支持

npm install babel-loader babel-preset-es2015 –save-dev

output.publicPath
表示资源的发布地址，当配置过该属性后，
打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。

图片打包

name 字段指定了在打包根目录（output.path）下生成名为 images 的文件夹，
并在原图片名前加上8位 hash 值
　　　　{
　　　　　　test: /.(png|jpg)$/,
　　　　　　loader: ‘url-loader?limit=8192&name=images/[hash:8].[name].[ext]’
　　　　}

我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，比如：

–save-dev

–save

在 package.json 文件里面提现出来的区别就是，

使用 –save-dev 安装的 插件，被写入到 devDependencies 对象里面去，

而使用 –save 安装的插件，责被写入到 dependencies 对象里面去。

那 package.json 文件里面的 devDependencies 和 dependencies 对象有什么区别呢？

devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

entry 需要构建的文件在哪里

path 指明构建 之后 输出文件的位置，这是真实的物理地址

publickPath
当执行webpack-dev-server时，先构建输出，然后提供web访问，该输出文件是在内存中
默认情况下，不设置publicPath则输出文件默认在运行webpack-dev-server的目录，
也就是根目录，，那么html中引用直接是src=”输出的文件”，，

如果设置了publicPath那么html中引用也要相对改变

进行后端开发，
就要采用双服务器模式：一个后端服务器和一个资源服务器（即Webpack-dev-server)

接下来修改output条目,将publicPath设置为webpack-dev-server服务器下资源目录的绝对路径

output: {
publicPath: “http://127.0.0.1:9090/static/dist/“,
path: ‘./static/dist/’,
filename: “bundle.js”
}

entry 需要构建的文件在哪里

path 指明构建 之后 输出文件的位置，这是真实的物理地址

publickPath
当执行webpack-dev-server时，先构建输出，然后提供web访问，该输出文件是在内存中
默认情况下，不设置publicPath则输出文件默认在运行webpack-dev-server的目录，
也就是根目录，，那么html中引用直接是src=”输出的文件”，，

如果设置了publicPath那么html中引用也要相对改变

进行后端开发，
就要采用双服务器模式：一个后端服务器和一个资源服务器（即Webpack-dev-server)

接下来修改output条目,将publicPath设置为webpack-dev-server服务器下资源目录的绝对路径

output: {
publicPath: “http://127.0.0.1:9090/static/dist/“,
path: ‘./static/dist/’,
filename: “bundle.js”
}

npm init 全部回车

npm install webpack –save-dev

npm install webpack-dev-server –save-dev

npm install react –save-dev

npm install react-dom –save-dev

npm install react-router –save-dev

npm install redux –save-dev

npm install react-redux –save-dev

npm install react-hot-loader –save-dev

npm install file-loader –save-dev

npm install jsx-loader –save-dev

npm install css-loader –save-dev

//将一些图片自动转成base64编码的，为你减轻很多的网络请求。
npm install url-loader –save-dev

npm install style-loader –save-dev

//添加ES6支持
npm install babel-core –save-dev

npm install babel-loader –save-dev

npm install babel-preset-es2015 –save-dev

npm install babel-preset-react –save-dev

npm install jquery –save-dev

npm install isomorphic-fetch –save-dev
//添加插件 会自动生成一个html文件
npm install html-webpack-plugin –save-dev

npm install open-browser-webpack-plugin –save-dev

//——————————————————————————–

webpack-dev-server –port 8000

开启webpack-dev-server的方法

1.————-hot

2.————inline

---

开发环境安装与生产环境安装

开发环境 npm install * –save-dev 安装到devDependencies下面

生产环境 npm install * –save 安装到 dependencies下面

“devDependencies”: {

“babel-core”: “^5.8.25”,

“babel-loader”: “^5.3.2”,

“css-loader”: “^0.12.1”,

“react”: “^0.13.3”,

“react-hot-loader”: “^1.3.0”,

“react-router”: “^0.13.3”,

“webpack”: “^1.12.2”,

“webpack-dev-server”: “^1.11.0”
},

“dependencies”: {
“lodash”: “~3.10.1”,
“react-kendo”: “~0.13.11”
}

---