webpack 教科书式入门教程

2024年4月21日 209次阅读 来源: 电波马达

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>    
</head>
<body>
    <script type="text/javascript" src="./bundle.js"></script>
</body>
</html>

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://segmentfault.com/a/1190000005022872
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞