数据API 案例 开发者 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
新闻动态 > 媒体报道

Webpack入门指南: 入口,输出,加载器和插件

本文由Nero0在众成翻译平台上翻译。

前端开发已经变成模块化的方式,代码的封装和结构也相应地提高了。工程化变成每一个项目非常关键的一部分,关于前端工程化的选择也非常的多。

这几年Webpack获得了很高的人气,因为它强大的功能和可扩展性,但是有一些开发者在编写配置文件的时候会感觉疑惑,较难去适应webpack的配置方式。

我们将从一个空配置文件开始,编写一些简单的配置,一步步的去完整的打包一个项目。这篇文章假定你们了解基本的 CommonJS 语法和模块的工作方式。

概念

不像其他的打包工具,Webpack 的魅力在于聚合你所有的项目依赖(不仅仅是代码,还包括其他资源文件)生成一个依赖关系网。

刚开始,这些事情可能看起来很奇怪:一个.js文件需要加载一个样式表,或者一个样式表文件检索一个被修改为模块的图片文件,但是对于 Webpack来说,这样可以让它了解你的程序包里都有哪些东西,并帮助你去转变转变和优化它们。

安装

首先添加用来初始化的npm包

npm install webpack webpack-dev-server --save-dev

接下来在项目根目录创建一个 webpack.config.js 文件,添加两条脚本命令到 package.json 文件中用作开发模式和生产模式的代码打包。

"scripts": {

  "start": "webpack-dev-server",

  "build": "webpack"

}

Webpack 命令会按照我们刚创建的配置文件执行,除非我们指出其他操作。

入口

有很多方式来指定我们的代码“入口点”,这个“入口点”将会是我们依赖关系网的根节点。

最简单的方式是传一个字符串:

var baseConfig = {

  entry: './src/index.js'

};

也可以传一个对象,以防我们以后可能需要不止一个入口的情况。

var baseConfig = {

  entry: {

    main: './src/index.js'

  }

};

我推荐使用后者,当项目逐渐壮大之后这样的扩展性更好。

输出

Webpack中的输出是一个对象,包含我们打包后的程序和资源将要去到的路径,以及它们采用的名称。

var path = require('path');


var baseConfig = {

  entry: {

    main: './src/index.js'

  },

  output: {

    filename: 'main.js',

    path: path.resolve('./build')

  }

};


// export configuration

module.exports = baseConfig;

如果你想使用对象来定义入口,而不是用字符串写死输出文件的名称,可以这么做:

output: {

  filename: '[name].js',

  path: path.resolve('./build')

}

这样当新的条目添加进来时,Webpack会使用它们的key值来定义文件名。

当有了这些简单的配置以后,我们已经可以跑起来简单的服务,并在本地开发时使用 npm start或 npm run budil来打包我们的代码。webpack-dev-server 会监控你的代码,当项目的依赖关系中某一些环节发生改变的时候,网站会自动重载。

加载器

Webpack 存在的目标就是处理我们所有的文件依赖。

// index.js file

import helpers from '/helpers/main.js';


// Hey Webpack! I will need these styles:

import 'main.css';

这是啥?在JavaScript里面require一个css文件?是的!但是打包器只能准备好处理Javascript的依赖关系。这是加载器介入的地方。

加载器提供了一种很简单的方式来拦截我们的依赖,并在打包之前提供预处理。

var baseConfig = {

  // ...

  module: {

    rules: [

      {

        test: /* RegEx */,

        use: [

          {

            loader: /* loader name */,

            query: /* optional config object */

          }

        ]

      }

    ]

  }

};

为了让加载器工作,我们需要一个正则表达式来定义我们需要修改的文件,以及一个字符串或数组用来申明我们需要使用的加载器。

样式

为了让Webpack可以处理样式,我们需要安装cssstyle加载器。

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

css加载器将会把样式文件翻译成依赖文件,style加载器将会自动添加 `` 标签当打包后的代码在页面上被加载时。

var baseConfig = {

  entry: {

    main: './src/index.js'

  },

  output: {

    filename: '[name].js',

    path: path.resolve('./build')

  },

  module: {

    rules: [

      {

        test: /\.css$/,

        use: [

          { loader: 'style-loader' },

          { loader: 'css-loader' }

        ]

      }

    ]

  }

};

在这个例子里面,main.css将先经过css加载器的处理,然后是style加载器

预处理器

添加对LESS或其他css预处理器也非常简单,只需要安装相应的加载器,并添加到规则中。

rules: [

  {

    test: /\.less$/,

    use: [

      { loader: 'style-loader' },

      { loader: 'css-loader' },

      { loader: 'less-loader' }

    ]

  }

]

编译

JavaScript也可以被加载器转化,比如我们可以使用Babel加载器来编译脚本文件。

rules: [

  {

    test: /\.js$/,

    use: [

      { loader: 'babel-loader' }

    ]

  }

]

图片

Webpack有一个很棒的特性,它可以在样式表里检测出url()语句,让加载器对图片文件或链接本身做出一些改变。

// index.less file


@import 'less/vars';


body {

  background-color: @background-color;

  color: @text-color;

}


.logo {

  background-image: url('./images/logo.svg');

}

通过添加这条规则,我们可以应用文件加载器来拷贝文件,或使用url-加载器,将图

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
新闻动态 > 媒体报道
Webpack入门指南: 入口,输出,加载器和插件
发布:2017-07-11

本文由Nero0在众成翻译平台上翻译。

前端开发已经变成模块化的方式,代码的封装和结构也相应地提高了。工程化变成每一个项目非常关键的一部分,关于前端工程化的选择也非常的多。

这几年Webpack获得了很高的人气,因为它强大的功能和可扩展性,但是有一些开发者在编写配置文件的时候会感觉疑惑,较难去适应webpack的配置方式。

我们将从一个空配置文件开始,编写一些简单的配置,一步步的去完整的打包一个项目。这篇文章假定你们了解基本的 CommonJS 语法和模块的工作方式。

概念

不像其他的打包工具,Webpack 的魅力在于聚合你所有的项目依赖(不仅仅是代码,还包括其他资源文件)生成一个依赖关系网。

刚开始,这些事情可能看起来很奇怪:一个.js文件需要加载一个样式表,或者一个样式表文件检索一个被修改为模块的图片文件,但是对于 Webpack来说,这样可以让它了解你的程序包里都有哪些东西,并帮助你去转变转变和优化它们。

安装

首先添加用来初始化的npm包

npm install webpack webpack-dev-server --save-dev

接下来在项目根目录创建一个 webpack.config.js 文件,添加两条脚本命令到 package.json 文件中用作开发模式和生产模式的代码打包。

"scripts": {

  "start": "webpack-dev-server",

  "build": "webpack"

}

Webpack 命令会按照我们刚创建的配置文件执行,除非我们指出其他操作。

入口

有很多方式来指定我们的代码“入口点”,这个“入口点”将会是我们依赖关系网的根节点。

最简单的方式是传一个字符串:

var baseConfig = {

  entry: './src/index.js'

};

也可以传一个对象,以防我们以后可能需要不止一个入口的情况。

var baseConfig = {

  entry: {

    main: './src/index.js'

  }

};

我推荐使用后者,当项目逐渐壮大之后这样的扩展性更好。

输出

Webpack中的输出是一个对象,包含我们打包后的程序和资源将要去到的路径,以及它们采用的名称。

var path = require('path');


var baseConfig = {

  entry: {

    main: './src/index.js'

  },

  output: {

    filename: 'main.js',

    path: path.resolve('./build')

  }

};


// export configuration

module.exports = baseConfig;

如果你想使用对象来定义入口,而不是用字符串写死输出文件的名称,可以这么做:

output: {

  filename: '[name].js',

  path: path.resolve('./build')

}

这样当新的条目添加进来时,Webpack会使用它们的key值来定义文件名。

当有了这些简单的配置以后,我们已经可以跑起来简单的服务,并在本地开发时使用 npm start或 npm run budil来打包我们的代码。webpack-dev-server 会监控你的代码,当项目的依赖关系中某一些环节发生改变的时候,网站会自动重载。

加载器

Webpack 存在的目标就是处理我们所有的文件依赖。

// index.js file

import helpers from '/helpers/main.js';


// Hey Webpack! I will need these styles:

import 'main.css';

这是啥?在JavaScript里面require一个css文件?是的!但是打包器只能准备好处理Javascript的依赖关系。这是加载器介入的地方。

加载器提供了一种很简单的方式来拦截我们的依赖,并在打包之前提供预处理。

var baseConfig = {

  // ...

  module: {

    rules: [

      {

        test: /* RegEx */,

        use: [

          {

            loader: /* loader name */,

            query: /* optional config object */

          }

        ]

      }

    ]

  }

};

为了让加载器工作,我们需要一个正则表达式来定义我们需要修改的文件,以及一个字符串或数组用来申明我们需要使用的加载器。

样式

为了让Webpack可以处理样式,我们需要安装cssstyle加载器。

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

css加载器将会把样式文件翻译成依赖文件,style加载器将会自动添加 `` 标签当打包后的代码在页面上被加载时。

var baseConfig = {

  entry: {

    main: './src/index.js'

  },

  output: {

    filename: '[name].js',

    path: path.resolve('./build')

  },

  module: {

    rules: [

      {

        test: /\.css$/,

        use: [

          { loader: 'style-loader' },

          { loader: 'css-loader' }

        ]

      }

    ]

  }

};

在这个例子里面,main.css将先经过css加载器的处理,然后是style加载器

预处理器

添加对LESS或其他css预处理器也非常简单,只需要安装相应的加载器,并添加到规则中。

rules: [

  {

    test: /\.less$/,

    use: [

      { loader: 'style-loader' },

      { loader: 'css-loader' },

      { loader: 'less-loader' }

    ]

  }

]

编译

JavaScript也可以被加载器转化,比如我们可以使用Babel加载器来编译脚本文件。

rules: [

  {

    test: /\.js$/,

    use: [

      { loader: 'babel-loader' }

    ]

  }

]

图片

Webpack有一个很棒的特性,它可以在样式表里检测出url()语句,让加载器对图片文件或链接本身做出一些改变。

// index.less file


@import 'less/vars';


body {

  background-color: @background-color;

  color: @text-color;

}


.logo {

  background-image: url('./images/logo.svg');

}

通过添加这条规则,我们可以应用文件加载器来拷贝文件,或使用url-加载器,将图

电话 0512-88869195