Webpack傻瓜式入门教程-01

该图来源于网络

  从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。接下来我们简单为大家介绍 Webpack 的安装与使用。

前言

  参考来源: webpack官方网站: 点击进入

目录

https://www.jianshu.com/p/9c9b555b52e8

---

  最近工作忙完之际，自学了webpack，刚学了点皮毛，准备写一篇webpack傻瓜式的上手教程，一是让大家不会的有个可以学习的地方，第二呢就是继续鞭策自己，有个备忘录的感觉。若有任何错误的描述及不准确的认知，希望各位大佬可以指点一二。接下来就开始我的讲述吧。

安装Webpack

使用cnpm安装webpack:

// 全局安装
cnpm install -g webpack
// 安装到你的项目目录
cnpm install --save-dev webpack

因为IDE问题，所以用cmd来安装的。

第一种：编译一个文件

在app.js同级建立webpack的配置文件webpack.config.js。然后打开该js，写入如下代码:

const path = require("path");

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, './'),
        filename: 'index_bundle.js'
    }
}

这样子就做好了一个index.js文件配置，在项目下运行webpack,就可以看到编译过程和编译结果，如下图:

编译结果
编译效果图

第二种: 多文件编译到一个文件

module.exports = {
    entry: ['./index.js','./index2.js'],
    output: {
        path: path.resolve(__dirname, './'),
        filename: 'index_bundle.js'
    }
}

多文件编译

第三种：多文件分别编译

module.exports = {
    entry: {
        test1: './index.js',
        test2: './index2.js'
    },
    output: {
        path: path.resolve(__dirname, './'),
        filename: '[name].js'
    }
}

效果图

后话

  目前为止，就会了这么点皮毛，接下来我将继续自学webpack，若有另外的一些收获和观点，将陆续发布出来，让还不会的朋友有个学习的地方，若有任何错误的地方，希望大家可以指正，谢谢大家。

说明

原创作品，禁止转载和伪原创，违者必究！