webpack

webpack

文档:

• webpack
• [翻译]阮一峰webpack教程（Demo集合）

参考入门 Webpack，看这篇就够了，对照写demo，遇到如下的问题

1.安装webpack-cli失败

可更换源后再安装

npm --registry https://registry.npm.taobao.org install webpack-cli -g

2.webpack app/main.js public/bundle.js提示错误

原因是webpack的打包cli命令已经更改：

webpack <entry> [<entry>] -o <output>

所以使用：webpack app/main.js -o public/bundle.js

3.提示Error: Cannot find module '@babel/core'

在Babel的安装与配置一节，出现如上的提示，重新使用npm start打包后，出现如下的错误：

大致的意思是 babel-loader与babel-core的版本不匹配

修改babel-loader为如下的形式："babel-loader": "^7.1.5"

---

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

用 npm 安装 Webpack：

$ npm install webpack -g

通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack

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

具体使用方式，可参考教程跟技术胖学webpack视频教程(1-5节,持续更新中)

配置文件

Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件

如上面教程的例子中的webpack.config.js ：

module.exports = {
    entry: "./main.js",
    output: {
        filename: 'bundle.js'
    }
};

终端使用webpack后，显示如下：

Hash: 11201a0f149646cac170
Version: webpack 2.5.1
Time: 91ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.67 kB       0  [emitted]  main
   [0] ./main.js 39 bytes {0} [built]

在文件夹中多了个bundle.js文件

loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。

CSS-loader

例如上面教程里面的CSS-loader

webpack.config.js配置文件，在里边加入加载器

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
        ]
    }
};

用npm 安装 css-loader 和 style-loader

$ npm install style-loader --save-dev
$ npm install css-loader --save-dev

使用webpack Image loader 加载图片

参见使用webpack Image loader 加载图片

webpack.config.js配置文件

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
        ]
    }
};

这里需要说明的是limit ，它的左右是如果图片的大小，小于8192bytes就以Data URL的形式引入图片，大于就用图片地址引用。

npm 安装url-loader和file-loader包

npm install url-loader --save-dev
npm install file-loader --save-dev

webpack 插件机制介绍

插件可以完成更多loader不能完成的功能。插件的使用一般是在webpack的配置信息 plugins选定中指定。Webpack本身内置了一些常用的插件，还可以通过npm安装第三方插件。

使用uglify-js 压缩打包JS代码

ugligy-js是一个用npm安装的JavaScript代码压工具，我们在grunt和gulp中经常使用。

用npm命令进行安装：

npm install uglify-js g

最常用的方法：

uglifyjs [input files] [options]

webpack.config.js的代码

var webpack = require('webpack');
module.exports = {
    entry: './main.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]
};

__dirname表示项目的根目录