webpack基础及简单应用

摘要：图表的起点被称之为入口起点。插件插件是用来拓展功能的，它们会在整个构建过程中生效，执行相关的任务。开始使用非常简单，我会展示给你看使用它的一个简单的项目。

一、什么是webpack

Webpack 扩展了CommonJs的require的想法，弥补了requireJS在模块化方面的缺陷,拥有强大的JS模块化的功能，比如你想在 CoffeeScript、Sass、Markdown 或者其他什么代码中require 你想要的任何代码的话？那么 Webpack 正是做这方面的工作。它会通过配置来取出代码中的依赖，然后把他们通过加载器把代码兼容地输出到静态资源中。 因此我理解的Webpack，就是一个出色的前端自动化构建工具、模块化工具、静态资源打包工具。

二、为什么要用webpack
现在很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
a:模块化，让我们可以把复杂的程序细化为小的文件;
b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
c:scss，less等CSS预处理器
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，

三、webpack的工作方式及目标
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
Webpack的目标是：
1、将依赖关系树分解为按需加载的大块；
2、保持初始加载时间低；
3、每个静态资产都应该是一个模块；
4、将第三方库集成为模块的能力；
5、能够定制模块捆绑器的几乎每个部分；
6、适合大项目；

四、Webpack的四个核心概念
1、入口(Entry)
webpack 将创建所有应用程序的依赖关系图表。图表的起点被称之为入口起点。入口起点告诉 webpack 从哪里开始，并遵循着依赖关系图表知道要打包什么。
2、出口(Output)
将所有的资源归拢在一起后，我们还需要告诉 webpack 在哪里打包我们的应用程序;webpack 的output属性描述了如何处理归拢在一起的代码。

3、加载器(Loader)
webpack 的目标是，让 webpack 聚焦于项目中的所有资源，而浏览器不需要关注考虑这些（这并不意味着资源(asset)都必须打包在一起）。webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理。而且 webpack 只理解 JavaScript。webpack loader 会将这些文件转换为模块，而转换后的文件会被添加到依赖图表中。

4、插件(Plugins)
插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西：Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个;插件并不直接操作单个文件，它直接对整个构建过程其作用。
webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

五、如何使用webpack
在开始之前，你需要把你的 Node.js 和 NPM 都更新到最新的版本。我们将会使用 NPM 安装一些工具。
开始使用 Webpack 非常简单，我会展示给你看使用它的一个简单的项目。第一步，为你的项目新建一个文件夹，然后输入 npm init，然后填写相关问题。这样会为你创建了 package.json;
安装 Webpack
接下来我们安装 Webpack，我们要把它安装在本地，然后把它作为项目依赖保存下来。输入 npm i webpack --save-dev。如果你想运行它，输入 webpack即可
设置 Webpack
Webpack 的最基础配置文件长这样：

Webpack.config.js
var path = require("path");
module.exports = {
  entry: "./app.js",
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "build.js"
  }
}

运行你的第一个编译

现在我们有了一个最简单的配置，我们需要有什么东西去编译，让我们开始一个经典的 Hello World
现在在你的命令行运行 webpack，然后你的应用会开始编译，一个 index.html 文件就这样出现在你的 /dist文件夹下，需要在 dist/ 下的 index.html 去启动项目。
这个文件可以用 html-webpack-plugin 来生成。使用它就只有一个配置的问题。一般来说使用 Webpack 来工作就是这么个套路。

在接下来的章节中我们会逐步介绍使用 Webpack 来构建项目来展示它的能力。

1、单个打包js到指定文件夹
Webpack.config.js配置

var path = require("path");
module.exports = {
  entry: "./app.js",
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "build.js"
  }
}

目录结构

入口文件app.js:

function hello (){
  const hello = "helloWorld";
  return hello;
}

2、打包多个入口文件到指定文件夹

Webpack.config.js配置
var path = require("path");
module.exports = {
  entry: {
    a: "./app.js",
    b: "./bpp.js"
  },
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "[name].js"
  }
}

目录结构

3、打包css到指定文件夹中的js中
Webpack.config.js配置

var path = require("path");
module.exports = {
  entry: {
    bundle: "./app.js",
  },
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "[name].js"
  },
  module:{
    loaders:[
     {test:/.css$/,loader:"style-loader!css-loader" },
    ]
  }
}

css-loader 是处理css文件中的url()等，style-loader 将css插入到页面的style标签
目录

4、打包index.html及多带带打包css文件
Webpack.config.js配置

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
Var ExtractTextPlugin=require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    bundle: "./app.js",
  },
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "[name].js"
  },
  module:{
    loaders:[
        {
          test: /.css$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
        })
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html"
    }),
    new ExtractTextPlugin("index.css")
  ]
}

html-webpack-plugin 它会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)。
使用 extract-text-webpack-plugin就可以把css从js中独立抽离出来。

目录

5、打包图片资源
Webpack.config.js配置

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
Var ExtractTextPlugin=require
("extract-text-webpack-plugin");
module.exports = {
  entry: {
    bundle: "./app.js",
  },
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "[name].js"
  },
  module:{
    loaders:[
        {
          test: /.css$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
        })
      },
      {
　　　　　　test: /.html$/,
　　　　　　loader: "html-withimg-loader"
　　　　},
      {
          test: /.(png|jpg|gif)$/,
          loader: "url-loader?limit=8192&name=[hash:8].[name].[ext]"
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html"
    }),
    new ExtractTextPlugin("index.css")
  ]
}

使用file-loader 可以打包css中url的图片，主要用来处理图片
url-loader是file-loader的加强版，可以使用limit参数，一般限制小图片转 base64 可以用 url-loader，其他情况都用 file-loader。
url-loader是对file-loader的上层封装
html图片问题用html-withimg-loader
入口文件app.js:

require("./index.css");
function hello (){
  const hello = "helloWorld";
  return hello;
}
hello();

目录

更多demo请移步https://github.com/Songzhiguo...