webpack基础及简单应用

Webpack介绍及使用

1、什么是webpack

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

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

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

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

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

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

5、如何使用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 来构建项目来展现它的能力。

一、单个打包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;
}

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

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'
  }
}

目录结构

三、打包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标签
目录

四、打包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中独立抽离出来。

目录

五、打包图片资源
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...