webpack快速入门和实战

超、凢脫俗 2022-09-23 08:47 165阅读 0赞

## webpack是什么 ##

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

![snUdHsd.png][]

这张图基本上解释了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中，这样就就可以更好的维护代码，但是要注意的是：

![h16molo.png][]

## 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_www.cnblogs.com_tugenhua0707_p_4793265.html]

[http://web.jobbole.com/tag/webpack/][http_web.jobbole.com_tag_webpack]

[http://www.3fwork.com/b401/003617MYM008091/][http_www.3fwork.com_b401_003617MYM008091]

[snUdHsd.png]: http://i.imgur.com/snUdHsd.png
[h16molo.png]: http://i.imgur.com/h16molo.png
[http_www.cnblogs.com_tugenhua0707_p_4793265.html]: http://www.cnblogs.com/tugenhua0707/p/4793265.html
[http_web.jobbole.com_tag_webpack]: http://web.jobbole.com/tag/webpack/
[http_www.3fwork.com_b401_003617MYM008091]: http://www.3fwork.com/b401/003617MYM008091/