webpack快速入门和实战

webpack是什么

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

这张图基本上解释了webpack是用来干嘛的，将一些相互依赖的模块(文件)，打包成一个或多个js文件，减少http请求次数，提升性能。这些相互依赖的模块可以是图片、字体、coffee文件、样式文件、less文件等。

1、 安装

先安装

install node.js

node.js包含一个包管理器：npm

基本命令

      webpack         // 最基本的启动webpack的方法
      webpack -w      // 提供watch方法；实时进行打包更新
      webpack -p      // 对打包后的文件进行压缩
      webpack -d      // 提供source map，方便调式代码

全局安装

 # npm install webpack -g

项目安装：

最好在工程中使用webpack，让webpack作为工程的依赖。这样你就能自己选择一个本地的webpack版本，不会强制使用全局的。

  # 进入项目目录
  # 确定已经有 package.json，没有就通过 npm init 创建
  # 安装 webpack 依赖
  # npm install webpack --save-dev

2、如何使用

使用ES6

安装 babel-loader：
# npm install babel-loader --save-dev
安装转码规则：
# npm install babel-preset-es2015 --save-dev
ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
# npm install --save-dev babel-preset-stage-0
# npm install --save-dev babel-preset-stage-1
# npm install --save-dev babel-preset-stage-2
# npm install --save-dev babel-preset-stage-3
参考格式：
{
    test: /\.js$/,
    loader: ‘babel?presets[]=es2015,presets[]=stage-0‘
}

编译css

    安装css-loader：
    # npm install css-loader  --save-dev
    安装style-loader
    # npm install style-loader  --save-dev
    参考格式：
    {
        test: /\.css$/,
        loaders: [‘style‘, ‘css‘, ‘autoprefixer‘]
    }

编译less

    # npm install less --save-dev
    安装less-loader：
    # npm install less-loader --save-dev
    参考格式：
    {
        test: /\.less/,
        loaders: [‘style‘, ‘css‘, ‘autoprefixer‘, ‘less‘],
    }

使用autoprefixer自动补上浏览器兼容

    # npm install autoprefixer-loader --save-dev
    参考格式：
    {
        test: /\.css$/,
        loaders: [‘style‘, ‘css‘, ‘autoprefixer‘]
    }, {
        test: /\.less/,
        loaders: [‘style‘, ‘css‘, ‘autoprefixer‘, ‘less‘],
    }

编译文件

    安装file-loader：
    # npm install file-loader --save-dev
    参考格式：
    {
        test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
        loader: ‘file-loader?name=[hash].[ext]‘
    }

编译图片

    # npm install url-loader --save-dev
    参考格式：
    {
    test: /\.(png|jpg)$/,
    loader: ‘url?limit=1200&name=[hash].[ext]‘
    }

编译JSX

    # npm install jsx-loader --save-dev
    # npm install babel-preset-react --save-dev
    参考格式：
    {
    test: /\.jsx$/,
    loaders: [‘jsx‘, ‘babel?presets[]=es2015,presets[]=stage-0,presets[]=react‘]
    }

示例源码

在项目目录下，新建一个webpack.config.js文件，把下面代码复制进去，然后在新建一个app.js和index.js文件，写上console.log(‘你好世界’);

执行命令：webpack 然后找到build目录就看到编译后的文件了

    var webpack = require(‘webpack‘);

    module.exports = {
      entry: {
          app: ‘./app‘, //编译的入口文件
          index: ‘./index‘, //编译的入口文件
      },
      output: {
          publicPath: ‘/build/‘, //服务器根路径
          path: ‘./build‘, //编译到当前目录
          filename: ‘[name].js‘ //编译后的文件名字
      },
      module: {
          loaders: [{
                  test: /\.js$/,
                  loader: ‘babel?presets=es2015‘
              }, {
                  test: /\.css$/,
                  loaders: [‘style‘, ‘css‘, ‘autoprefixer‘]
              }, {
                  test: /\.less/,
                  loaders: [‘style‘, ‘css‘, ‘autoprefixer‘, ‘less‘],
              }, {
                  test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
                  loader: ‘file-loader?name=[hash].[ext]‘
              }, {
                  test: /\.(png|jpg)$/,
                  loader: ‘url?limit=1200&name=[hash].[ext]‘ //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
              }
          ]
      },
      plugins: [
              new webpack.optimize.CommonsChunkPlugin(‘common.js‘) //将公用模块，打包进common.js
      ],
      resolve: {
          extensions: [‘‘, ‘.js‘, ‘.jsx‘] //后缀名自动补全
      }
    };

plugins:可以使用插件讲几个公共模块加载到common.js中，这样就就可以更好的维护代码，但是要注意的是：

3. 详细讲解

webpack.config.js文件通常放在项目的根目录中，它本身也是一个标准的Commonjs规范的模块。在导出的配置对象中有几个关键的参数：

1.entry

entry可以是个字符串或数组或者是对象。

当entry是个字符串的时候，用来定义入口文件：

     entry: ‘./js/main.js‘

当entry是个数组的时候，里面同样包含入口js文件，另外一个参数可以是用来配置webpack提供的一个静态资源服务器，webpack- dev-server。webpack-dev-server会监控项目中每一个文件的变化，实时的进行构建，并且自动刷新页面：

     entry: [
         ‘webpack/hot/only-dev-server‘,
         ‘./js/app.js‘
     ]

当entry是个对象的时候，我们可以将不同的文件构建成不同的文件，按需使用，比如在我的hello页面中只要``引入hello.js即可：

     entry: {
         hello: ‘./js/hello.js‘,
         form: ‘./js/form.js‘
     }

2.output

output参数是个对象，用于定义构建后的文件的输出。其中包含path和filename：

     output: {
         path: ‘./build‘,
         filename: ‘bundle.js‘
     }

当我们在entry中定义构建多个文件时，filename可以对应的更改为[name].js用于定义不同文件构建后的名字。

3.module

关于模块的加载相关，我们就定义在module.loaders中。这里通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器。比如说给less文件定义串联的三个加载器（！用来定义级联关系）：

module: {
    loaders: [
        { test: /\.js?$/, loaders: [‘react-hot‘, ‘babel‘], exclude: /node_modules/ },
        { test: /\.js$/, exclude: /node_modules/, loader: ‘babel-loader‘},
        { test: /\.css$/, loader: "style!css" },
        { test: /\.less/, loader: ‘style-loader!css-loader!less-loader‘}
    ]
}

此外，还可以添加用来定义png、jpg这样的图片资源在小于10k时自动处理为base64图片的加载器：

    { test: /\.(png|jpg)$/,loader: ‘url-loader?limit=10000‘}

给css和less还有图片添加了loader之后，我们不仅可以像在node中那样require js文件了，我们还可以require css、less甚至图片文件：

 require(‘./bootstrap.css‘);
 require(‘./myapp.less‘);
 var img = document.createElement(‘img‘);
 img.src = require(‘./glyph.png‘);

但是需要知道的是，这样require来的文件会内联到 js bundle中。如果我们需要把保留require的写法又想把css文件单独拿出来，可以使用下面提到的[extract-text-webpack-plugin]插件。

在 上面示例代码中配置的第一个loaders我们可以看到一个叫做react-hot的加载器。我的项目是用来学习react写相关代码的，所以配置了一个 react-hot加载器，通过它，可以实现对react组件的热替换。我们已经在entry参数中配置了webpack/hot/only-dev- server,所以我们只要在启动webpack开发服务器时开启–hot参数，就可以使用react-hot-loader了。在 package.json文件中这样定义：

 "scripts": { 2 "start": "webpack-dev-server --hot --progress --colors", 3 "build": "webpack --progress --colors" 4 }

4.resolve

webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀：

resolve:{
     extensions:[‘‘,‘.js‘,‘.json‘]
 }

然后我们想要加载一个js文件时，只要require(‘common‘)就可以加载common.js文件了。

5.plugin

webpack提供了[丰富的组件]用来满足不同的需求，当然我们也可以自行实现一个组件来满足自己的需求。在我的项目里面没有特殊的需求，于是便只是配置了NoErrorsPlugin插件，用来跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误：

plugins: [
     new webpack.NoErrorsPlugin()
 ]

6.externals

当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题：

externals: {
 "jquery": "jQuery" 3 }

这样我们就可以放心的在项目中使用这些API了：var jQuery = require("jquery");

7.context

当我们在require一个模块的时候，如果在require中包含变量，像这样：

require("./mods/" + name + ".js");

那么在编译的时候我们是不能知道具体的模块的。但这个时候，webpack也会为我们做些分析工作：

1.分析目录：‘./mods‘；
2.提取正则表达式：‘/^.*\.js$/‘；

于是这个时候为了更好地配合wenpack进行编译，我们可以给它指明路径，像在cake-webpack-config中所做的那样（我们在这里先忽略abcoption的作用）：

var currentBase = process.cwd();
var context = abcOptions.options.context ? abcOptions.options.context :
path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

参考：http://www.cnblogs.com/tugenhua0707/p/4793265.html

http://web.jobbole.com/tag/webpack/

http://www.3fwork.com/b401/003617MYM008091/

时间： 2024-10-16 04:24:02

webpack快速入门和实战的相关文章

CMake快速入门教程-实战

http://www.ibm.com/developerworks/cn/linux/l-cn-cmake/ http://blog.csdn.net/dbzhang800/article/details/6314073 http://www.cnblogs.com/coderfenghc/archive/2013/01/20/2846621.html http://blog.sina.com.cn/s/blog_4aa4593d0100q3bt.html http://hahack.com/c

TensorFlow快速入门与实战

课程目录:01.课程内容综述02.第一章内容概述03.TensorFlow产生的历史必然性04.TensorFlow与JeffDean的那些事05.TensorFlow的应用场景06.TensorFlow的落地应用07.TensorFlow的发展现状08.第二章内容概述09.搭建你的TensorFlow开发环境10.HelloTensorFlow11.在交互环境中使用TensorFlow12.在容器中使用TensorFlow13.第三章内容概述14.TensorFlow模块与架构介绍15.Ten

转:CMake快速入门教程-实战

CMake快速入门教程:实战 收藏人:londonKu     2012-05-07 | 阅:10128  转:34    |   来源   |  分享      0. 前言一个多月前,由于工程项目的需要,匆匆的学习了一下cmake的使用方法,现在有时间拿出来整理一下.本文假设你已经学会了cmake的使用方法,如果你还不会使用cmake,请参考相关资料之后再继续向下看.本文中介绍的是生成可执行程序的方法和步骤,生成动态库和静态库的方法与此有所不同,随后会介绍动态库和静态库项目中cmake的编写方

Webpack快速入门（一）

本文可供Webpack新手与Webpack老手复习之参考.注:本文基于当前最新的webpack V4.29.5:本文示例操作步骤在Mac下实现. 前提 (1)具有一定JavaScript基础(2)了解npm基本使用 什么是Webpack? 有文(参考(2))说"WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用". 而官方

webpack快速入门——webpack3.X 快速上手一个Demo

1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件. 2.在dist下建立一个index.html文件,写入以下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

webpack快速入门——配置JS压缩，打包

1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugins:[ new uglify() ] 3.在终端输入webpack,你会发现JS代码已经被压缩了,如果你用的是VSCode,可以按住Alt+Z代码自动换行,查看效果 4.上图

webpack快速入门——插件配置：HTML文件的发布

1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-webpack-plugin'); 3.引入后进行安装   cnpm i html-webpack-plugin --save-dev 4.在webpack.config.js中进行插件配置 new htmlPlugin({ minify:{ removeAttributeQuotes:true }, h

Webpack快速入门（二）

在前文中,已经成功使用Webpack打包并生成了一个目标.js文件.但是,在终端中进行复杂的操作,显然是不太方便且容易出错的.接下来,让我们学习Webpack的另一种更常见的使用方法,即通过配置文件来使用Webpack.这也是webpack的重点使用方式. 首先,提醒注意的是,我们要学习的这个配置文件其实也是一个简单的JavaScript模块文件,我们可以把所有的与打包相关的信息放在里面.通过一个js文件来实现配置功能的一个重要好处是,你可以在其中加入灵活多样的注释--在.json配置文件中是非

Webpack快速入门（三）

作为前两篇的补充,本文想再说明一下npx命令相关的另一种实现. NPM Scripts 在前面的文章中,我们提到使用如下命令方式: npx webpack ...... 于是,位于"./node_modules/.bin/webpack"便会被执行.这得益于npx这个命令. 其实,还有另外一种方式,更为常用,即借助于npm run命令和package.json配置文件中的"scripts"键. 示例 请看下面的配置文件: { "name": &q