webpack 教科书式入门教程

13651657101 发布于2019-08-19 18:12 / 2132人阅读

摘要：教程最近刚用完又来捣鼓捣鼓，这只是个简单的新手入门教程不多说注意安装前检查的安装目录路径是否存在空格，建议安装在无空格文件夹目录下。

Webpack4.x 教程

最近刚用完 gulp 又来捣鼓捣鼓 webpack ，这只是个简单的新手入门教程...不多说；
注意：安装webpack前检查nodejs的安装目录路径是否存在空格( Program Files (x86) )，建议安装在无空格文件夹目录下。

安装

全局安装（以管理员身份运行命令行）

$ npm install webpack -g

初始配置文件 package.json （一直回车，就会在项目目录下生成该文件）

$ npm init

到项目目录安装，将 webpack 添加到 package.json

$ npm install webpack --save-dev

安装完成后，打开 package.json 将会看到如下代码

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.0"
  }
}

同时还可以选择，安装不同的版本

$ npm install webpack@1.2.x --save-dev

举颗栗子

在项目目录下创建入口文件 entry.js

vim entry.js

document.write("hello webpack!");

创建 index.html

vim index.html




    
    webpack

Run一下

$ webpack ./entry.js bundle.js --colors

如果成功，会显示如下代码

Version: webpack 1.13.0
Time: 34ms
    Asset     Size  Chunks             Chunk Names
bunble.js  1.42 kB       0  [emitted]  main
   [0] ./entry.js 33 bytes {0} [built]

接下来打开 index.html 如果页面上显示 hello webpack 说明已经成功第一步了

hello webpack

添加一个文件

vim content.js

module.exports = "这里是 content.js 的内容！";

更新一下 entry.js

document.write(require("./content.js"));

继续Run一下

$ webpack ./entry.js bundle.js --colors

打开 index.html 将会看到

这里是 content.js 的内容！

打包CSS

安装 css-loader , style-loader 模块
其他模块：http://webpack.github.io/docs...

.css 文件使用 style-loader 和 css-loader 来处理
.js 文件使用 jsx-loader 来编译处理
.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理

$ npm install css-loader --save or $ npm install css-loader --save-dev

添加文件 style.css

vim css/style.css

body{
    font-size: 36px;
}

更新 entry.js

require("!style!css!./css/style.css");
document.write(require("./content.js"));

Run一下

$ webpack ./entry.js bundle.js --colors

加载器测试

更新 entry.js

- require("!style!css!./css/style.css");
+ require("./css/style.css");
document.write(require("./content.js"));

Run一下

$ webpack ./entry.js bundle.js --module-bind "css=style!css"

使用 webpack.config.js

每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。

vim webpack.config.js

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /.css$/, loader: "style!css" }
        ]
    }
};

Now we can just run

$ webpack

webpack 命令会优先读取项目中的 webpack.config.js 文件

一些参数

--progress 打印打包日志

--colors 带颜色的日志

--watch 监控自动打包

-d 生成map映射文件

-p 压缩混淆脚本

开发服务器

$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors

服务器可以自动生成和刷新，修改代码保存后自动更新画面

http://localhost:8080/webpack-dev-server/bundle

很棒的DEMO

我是写完这个才发现这个教程的...不过不晚
传送门：https://github.com/ruanyf/web...

Reference API

官网： http://webpack.github.io/
文档： http://webpack.github.io/docs/

如有不正之处，欢迎指正。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79326.html

编程书单：十本Python编程语言的入门书籍

摘要：本文与大家分享一些编程语言的入门书籍，其中不乏经典。全书贯穿的主体是如何思考设计开发的方法，而具体的编程语言，只是提供一个具体场景方便介绍的媒介。入门入门容易理解而且读起来幽默风趣，对于编程初学者和语言新手而言是理想的书籍。本文与大家分享一些Python编程语言的入门书籍，其中不乏经典。我在这里分享的，大部分是这些书的英文版，如果有中文版的我也加上了。有关书籍的介绍，大部分截取自是官...

desdik 2019-07-24 18:22 评论0 收藏0
如果想成为一名顶尖的前端，这份书单你一定要收藏！

摘要：其中负载均衡那一节，基本上是参考的权威指南负载均衡的内容。开发指南读了一半，就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队发表于云+社区专栏作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍...

callmewhy 2019-08-02 16:06 评论0 收藏0
如果想成为一名顶尖的前端，这份书单你一定要收藏！

摘要：其中负载均衡那一节，基本上是参考的权威指南负载均衡的内容。开发指南读了一半，就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队发表于云+社区专栏作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍...

Scliang 2019-08-23 12:01 评论0 收藏0
如果想成为一名顶尖的前端，这份书单你一定要收藏！

摘要：其中负载均衡那一节，基本上是参考的权威指南负载均衡的内容。开发指南读了一半，就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队发表于云+社区专栏作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍。...

233jl 2019-04-23 13:22 评论0 收藏0