webpack从0到1超详细超基础学习教程

概念

本身是一个一听到webpack就头大，看着一堆不知道那是什么玩意的东西总以为本身作好前端就好了，可是在使用vue-cli的时候总以为要改其中的一些东西进行项目初始化的时候可以更好使用！因此想要根据官方文档进行一个webpack的教程，写这些主要仍是为了进行一个系统的学习，帮助在webpack的道路上迷茫的同窗们。

在进行webpack的学习以前，第一步就是要让你们认识一下webpack中四个核心的概念。

四个核心概念

1. 入口（entry）

相信这个字面意思你们都没有问题，这个就是指定webpack的入口文件，指定其从什么地方开始。找到这个起始点，再从起始点出发来看依赖的文件，每一个依赖都将被处理，最后输出。

示例：

// webpack.config.js
module.exports = {
    entry: './src/index.js'
}

上述代码以及入口是简单的配置，是一个简单的单入口，是一种简写方式，具体的多入口配置方式以下。

示例：

// webpack.config.js
module.exports = {
    entry: {
        fistpage: './src/index.js',
        nextpage: './src/next.js',
        lastpage: './src/last.js',
    }
}

2. 输出（output）

有入口就确定有出口，这里天然就是定义文件输出的位置，以及输出文件的名字和目录，和入口同样，你能够定义一个output段来配置文件的输出。

固然，输出的文件入口指定一个就能够了，区分的只是文件的名字便可，所以在这里只给你们介绍一种，输入时候的名字是什么，则输出的文件名字就是什么便可，只须要改filename为[name].js。

示例：

// webpack.config.js
const path = require('path')
module.exports={
    entry: './src/index.js',
    output: {
        path: path.resolve(_dirname, 'dist'),
        filename: 'first-webpack.js'
    }
};

解释一下上述代码，首先咱们先倒入一个nodejs一个操做文件路径的核心模块path，而后使用path进行文件路径操做，将生成的文件存放在dist目录，生成的文件名字为first-webpack.js。

3. loader

webpack自己只可以理解一些js文件，可是loader能够作到让其去处理一些非js文件，好比咱们的css文件，图片文件，loader能够将这些文件转换成webpack可以处理的有效模块，因此由于它的存在，你import导入进来任何类型模块。

示例：

// webpack.config.js
const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(_dirname, 'dist'),
        filename: 'first-webpack.js'
    },
    module: {
        rules: [
            {test: /\.txt$/, use: 'raw-loader'}
        ]
    }
}

以上，在配置loader的时候，要新建一个module的对象，在其对象中来定义rules属性，里面存在两个必要的属性，test和use，其中

1. test表示要使用loader进行转换的一个或者一些文件，在这里是指被导入的模块的后缀名为.txt文件
2. use则表示对于被导入的此类的文件，咱们会使用raw-loader转换一下，在进行打包

注：必定要注意此项配置是在module对象下的rules下进行配置

这里再作一个演示，好比咱们平时在项目中使用css，可是前面也说了在webpack中可能不会识别css，所以这里要使用loader加载css文件，可是首先要安装对应的loader进行加载css文件，这里使用css-loader，安装命令

npm install --save-dev css-loader

而后在webpack中要配置，指定css文件使用css-loader加载

module.exports = {
    rules: [
        {test: /\.css$/, use: 'css-loader'}
    ]
}

还有其它的方式可使用，做用是相同的，就是使用内联或者cli

4. 插件（plugins）

loader是用来转换某些类型的模块，而插件则用来去执行更广的任务，这个功能很是强大，能够用来处理各类任务。固然，使用方法也是很简单，直接将npm安装的插件经过require引入进来便可，而后在配置文件中将其添加进plugins数组中，也能够自定义，固然也能够一个插件使用其不一样的功能屡次使用，可是相应的你要new一个实例。

示例：

// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(_dirname,'dist'),
        filename: 'first-webpack.js'
    },
    module: {
        rules: [
            {test: /\.txt$/, use: 'raw-loader'}
        ]
    },
    plugins: [
        new webpack.optimize.UgifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
}

配置

固然，除了上述四个核心概念，这里还有一个配置，你能够配置不一样的模式来进行webpack内置优化，能够选择development或者production，配置不一样的mode对应着不一样的文件以及plugins插件进行相应的模式优化。

module.exports = {
    mode: 'development'
}

模块

想必你们确定知道js或者本身熟悉的一些模块，可是到底什么是webpack模块相比仍是比较陌生，webpack模块主要的做用就是可以使用各类方式表达本身和其余模块的依赖关系。

好比：

1. import语句
2. require()语句
3. 样式文件的@import语句
4. url或者src的一些连接

可支持基本上各类模块，好比咱们ts，sass以及less文件等，容许各类技术使用webpack进行，在webpack中对于模块的路径有三种形式。

1. 绝对路径：import "/home/src/file"
2. 相对路径：import "./file"
3. 模块路径：import "module"，这个特别说明一下，这里的模块将会在resolve.modules指定目录进行搜索

webpack还有一个重要的环节，就是依赖图，在webpack中，一个文件依赖另外一个文件，就称为这两个文件有着依赖关系，因此在用图像资源的时候，咱们能够为图像与文件中间创建依赖关系，这样在打包文件的时候，就可以将图片资源也可以打包，可使用import和require将图片打包进来

这些用来咱们入门webpack已经足够了，固然webpack不只仅是这些，还有着不少更高级的用法，可是这里仅仅是webpack的一个入门，让你们可以知道webpack的一些具体的做用，若是你们还想了解webpack的其余内容，能够在下面留言，若是你们须要我会再出一个你们须要的教程，谢谢！