webpack3.10.0(入门系列基本概念1)

一、概念

webpack的核心是一个用于现代JavaScript应用程序的静态模块打包程序。当webpack处理您的应用程序时，它会递归地构建一个依赖图，其中包含应用程序所需的每个模块，然后将所有这些模块打包到一个或多个包中。

在开始学习之前我们需要了解它的四个核心概念：

• 入口（entry）
• 产量（output）
• 装载机（loader）
• 插件（plugins）

入口(entry)

入口就是整个程序打包的入口文件，入口文件里面有各种引入文件的依赖关系，进入之后，webpack会找出依赖的其他js,css等模块，下面是一个简单的entry配置示例：

在webpack.config.js（webpack默认的启动入口）

module.exports = {
   entry:{
        main:'./src/script/main.js',
    },
};

　　

entry里面你可以根据需求配置多个入口，示例如下

module.exports = {
   entry:{
        main:'./src/script/main.js',
        a: './src/script/a.js',
        b: './src/script/b.js',
        c: './src/script/c.js'
    },
};

 出口(output)

输出属性告诉webpack将打包后的文件存放在哪里以及如何命名这些文件。您可以通过output在您的配置中指定一个字段来配置这一部分：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),//resolve是node里面path的一个方法，指向绝对路径
    filename: 'my-first-webpack.bundle.js'//文件打包后的文件名
  }
};

上面的代买中output.path表示文件打包后的存放路劲，output.filename表示文件打包后的文件名

切记：webpack2.0以上的版本输出文件必须设置绝对路径，不然会报错

装载机(loader)

loader的作用是能让webpack处理其他非js文件，原则上webpack只认识js文件，webpack打包时会通过loader处理文件，会把引入的文件都当做模块来处理，常见的loader有style-loader,css-loader,file-loader,url-loader,less-loader等

loader在webpack配置中有两个目的：

1. test属性表示哪种类型的文件应该被转换
2. use属性指示应该使用哪个加载器进行转换

webpack.config.js

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

　上面的配置rules为具有两个必需属性的单个模块定义了一个属性：test和use。这告诉webpack的编译器如下：

　“嘿，webpack编译器，当你遇到一个路径，解析到一个”.txt“文件里面的一个require()/ import语句，使用它raw-loader来转换它，然后再添加到包。

插件(plugins)

虽然loader被用来转换某些类型的模块，但是插件可以用来执行更广泛的任务。插件的范围从捆绑优化和缩小到定义类似环境的变量。插件的功能是非常强大，可以用来解决各种各样的任务。

为了使用一个插件，你需要require()它并将其添加到plugins数组中。大部分插件都可以通过选项进行自定义。既然你可以在一个配置中多次使用一个插件来达到不同的目的，你需要通过调用new操作符来创建它的一个实例。

 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

　附上官网给出的一些插件列表https://webpack.js.org/plugins/

---

本篇文章主要介绍webpack的基本概念，下一篇文章将通过实例demo说明具体用法