Webpack2 入门踩坑教程（一）

最新推荐文章于 2021-07-11 21:51:28 发布

EarlEcho

最新推荐文章于 2021-07-11 21:51:28 发布

阅读量685

点赞数

分类专栏： Webpack 文章标签： webpack webpack2

本文链接：https://blog.csdn.net/Echo601/article/details/76174694

版权

Webpack 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

注：非原创，原文来自：http://blog.csdn.net/alanfancy/article/details/64444204
本人通过此链接博客学习，并在此基础上增加自己的想法。

webpack所有操作必须基于node，网上自行百度教程

Webpack的核心思想
1.一切都是模块——就像js文件可以视作“模块”一样，其他所有的一切（CSS，图片，HTML）都可以被视作模块，通过require加载。。
2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件，并且会一直不停进行加载！所以Webpack通过大量的特性去分割你的代码，生成多个“bundle”片段，并且异步地加载项目的不同部分。

一．起步(HELLO WORLD)

安装http-server服务器：npm install http-server -g（全局安装，这一步若省略后面配置监听端口时会失败）。
在你的工作区间建立node项目，名字为webpack-test，在项目内的命令行中初始化npm,可得到package.json文件：

    > npm init

package.json是个工程文件( 包括了需要的以来描述，库描述，版本，作者等信息 )。
编辑器打开package.json可以看到以下信息：

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "根据webpack2完整踩坑教程学习",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/EarlEcho/webpack-test.git"
  },
  "author": "EarlEcho",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/EarlEcho/webpack-test/issues"
  },
  "homepage": "https://github.com/EarlEcho/webpack-test#readme",
  "devDependencies": {
    "webpack": "^3.4.1"
  }
}

项目根目录下创建index.html ，并创建一个id为app的div。
项目根目录下创建index.js，输入以下内容：

var app = document.getElementById('app');
app.innerHTML = "helloWrold";

在该项目下打开命令行，安装webpack：

npm install webpack –save-dev

输入：

webpack. index.js bundle.js

将index.js打包为bundle.js文件
完成后可以发现项目下多了一个bundle.js的文件，这个是将index.js打包后的文件。

在index.html中引用bundle.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>webpack index</title>
    </head>
    <body>
        <div id="app">
            <script src="bundle.js" type="text/javascript" charset="utf-8"></script>
        </div>
    </body>
</html>