webpack初识！

时间 2019-11-12

标签 webpack 繁體版

原文原文链接

最近在使用webpack 感受棒棒哒下面这个简单的教程可让你走入webpack的世界javascript

欢迎使用webpack

这个小教程经过简单的例子来引导你们使用webpackcss

经过这些这篇文章你能够学到html

如何安装webpack
如何使用webpack
如何使用加载器
如何使用开发服务器

安装webpack　

你的电脑上须要先安装node.jsjava

$ npm install webpack -g
这样就可使用webpack命令node

编码

在一个空的文件夹里建立一个文件
添加 entry.jswebpack

document.write("It works.");

添加 index.htmlgit

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

在当前文件夹下输入下面命令github

$ webpack ./entry.js bundle.jsweb

运行上面命令将会把entry.js编译为bundle.js,若是编译成功就会有下面的提示npm

在浏览器里打开index.html

第二个文件

接下来咱们把一些代码移到另外一个文件
添加 content.js

module.exports = "It works from content.js."

修改 entry.js

-  document.write("It works");
+  document.write( require("./content.js));

而后继续编译

$ webpack ./entry.js bundle.js

刷新浏览器

webpack 会分析你的entry文件所依赖的其余文件，这些文件(也叫模块)也会被包含在你的bundle.js中，webpack会给每一个模块一个惟一的id而且经过这些id很容易的保存全部模块到bundle.js。在启动时只有入口模块被调用执行，一个简单的运行提供了所需的功能而且在须要其余模块时执行依赖

第一个加载器

咱们但愿在咱们的应用里添加css文件
WebPack只能处理JavaScript自己，因此咱们须要CSS加载器来处理CSS文件。咱们还须要的样式装载在CSS文件应用的样式。
在控制台之行

npm install css-loader style-loader

来安装加载器（须要本地安装因此不须要-g 在项目文件夹里安装）安装后会在项目文件里建立一个node-modules 文件夹

接下来咱们建立一个　style.css

body{background:＃ff0000;}

修改 entry.js

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

继续执行上面那句编译命令再刷新浏览器

经过前缀加载器这个模块儿以某种渠道被加载这些加载器经过特殊的方式转换文件内容转换后成为javascript模块

捆绑加载器

咱们不但愿写require("!style!css!./style.css");这么长么长的require
那么咱们能够为加载器绑定文件扩展名以后咱们就能够直接写require("./style.css")这样

修改entry.js

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

编译

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

有些环境可能要在"css=style!css" 加双引号

配置文件

咱们但愿把全部的配置都放在一个配置文件里面

添加webpack.config.js文件

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

如今咱们只须要在终端执行

webpack

webpack命令须要在webpack.config.js所处的文件目录下执行

一个有趣的输出

若是咱们的项目文件较大须要一个较长时间的编译编译时咱们但愿有一个带颜色的进度条展现咱们能够经过一下命令实现

webpack --progress --colors

监听模式

若是不想每次修改文件都去从新执行一遍命令咱们能够用下面命令来监听文件变化并编译

webpack --progress --colors --watch

webpack在编译时能够缓存未改变的模块儿和输出文件

开发环境服务

这个主要是起了个node的sever服务能够在浏览器上经过设置的端口访问而且还能实时刷新页面的修改内容，很是方便实用哟

npm install webpack-dev-server -g

webpack-dev-server --progress --colors

本文翻译于 webpack官网开始教程