webpack 教科书式入门教程

时间 2019-11-06

标签 webpack 教科书入门教程繁體版

原文原文链接

Webpack4.x 教程

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

安装

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

$ npm install webpack -g

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

$ npm init

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

$ npm install webpack --save-dev

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

{
  "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"
  }
}

同时还能够选择，安装不一样的版本node

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

举颗栗子

在项目目录下建立入口文件 entry.jswebpack

vim entry.js

document.write("hello webpack!");

建立 index.htmlgit

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一下github

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

若是成功，会显示以下代码web

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 说明已经成功第一步了npm

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/

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