webpack入门与项目创建打包

为什么要使用WebPack

现如今前端开发复杂度愈来愈大：复杂的js代码和一大堆依赖包等，为了简化开发，前端社区涌出来很多好的实践方法：

模块化 ：让我们把复杂的程序细化为小的文件；
类似于TypeScript这种在js基础上拓展的开发语言：使我们能够实现目前版本的js不能直接使用的特性，并且之后还能转换为吧js文件使浏览器识别；
Scss、less等css预处理器
···
这些改进大大提高我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别到，
而手动处理又十分麻烦，webpack就是处理这个问题的。

webpack可以看做一个模块打包机，它做的工作有：分析你的项目结构，找到js模块以及其他的一些浏览器不能直接运行的拓展语言（Scss、TypeScript等），并将其转换和打包成适合的格式供浏览器使用。

它的工作方式：把你的项目当做一个整体，通过一个给定的主文件（如;index.js)，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个或多个浏览器可识别的js文件。

webpack的工作方式.png

基础概念：入口(entry)、出口(output)、loader、插件(plugins)、模式

webpack使用实战：
1.新建一个项目的文件夹，进入该文件夹，使用以下命令在项目根目录下生成package.json文件：
$ npm init

sublime显示的该json文件如下：

image.png

2.为项目引入webpack依赖：
$ npm install --save-dev webpack
json文件中新增了

image.png

3 创建并配置webpack.config.js

创建webpack.config.js之前，先创建一个index.js和index.html,一个为入口文件，一个为普通的html文件
完了之后，目录就应该是这样的

image.png

在index.js里面写上这行测试用途的代码

document.write("hello world");

之后，创建一个webpack.config.js，代码如下

let path = require('path');
let webpack = require('webpack');
module.exports = {
    entry: './index.js',
    output: {
        path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
        filename: "bundle.js"
    },
    module: {
        rules: [

        ]
    }
};

这个也应该是最基础的webpack.config.js了
然后执行 $ webpack
这个命令就是打包输出，执行完了之后，会看到，文件夹上多了一个dist文件夹，里面有个bundle.js，这个就是打包输出之后的文件夹和文件。需要的就是这些。

第4步，测试结果

在index.html引入之前输出的bundle.js。

[图片上传失败...(image-192355-1541234250336)]
最后，在随便一个浏览器，打开index.html

image.png

大功告成！上面这里写了很多，但实际上操作起来就是分分钟的事情，当然这是最简单的从零开始。

最后编辑于：2018.11.03 16:40:29