webpack 的使用教程

時間 2019-11-08

標籤 webpack 使用教程简体版

原文原文鏈接

webpack 的使用教程

今天接觸webpack，就着官網上的教程一步一步的玩，把本身的理解總結以便和你們交流

webpack的主要特色

1. 能夠把js,css,image,甚至文本當成模塊來處理，並經過require()的方法來調用。

2. 可以自動識別模塊之間的依賴。

webpack的安裝,一般是使用npm。

建立一個文件夾vue-webpack-basic,使用命令行進入該文件夾，輸入npm install webpack,固然你也能夠使用全局安裝 npm install webpack -gjavascript

2. 配置

在項目的根目錄上建立配置文件 webpack.config.js,它的做用如同常規的 gulpfile.js/Gruntfile.js。

其中：css

dist是最終文件生成的目錄
lib 一些公共的類庫
node_modules目錄是經過npm安裝的一些模塊的目錄所在，如jquery，vue等一些框架
src 是源碼目錄，開發時的文件都放在此目錄下
index.html 應用入口頁面
package.json項目描述文件
README.md 項目說明文件
webpack.config.js wepack工具的配置文件

各個文件的內容分別以下html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="dist/app.js" charset="utf-8"></script>  
</head>
<body>
    <div class="name"></div>
</body>
</html>

只須要在html文件中引入入口文件entryvue

entry.js

require('../css/index.css');
var $ = require('jquery');
console.log($('body'));
$(function(){
    $('.name').text("經過jq錄入的數據");
});

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

注意：webpack 內置的功能只能處理js，若是想要經過require()的方法來調用css，image等其餘格式的文件，須要使用相應的插件：java

使用css-loader和style-loader經過require()來調用css
- 安裝插件 npm install css-loader style-loader
在webpack中使用第三方庫，只須要在根目錄使用npm install packageName 下載安裝須要的庫，而後在webpack頁面中經過require()的形式加載進來，就能夠直接使用了。如此處的jquery。

content.js

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

即使是文本也能夠使用CommonJs的加載到js文件中。node

index.css

body{
    background-color: green;
}

執行命令 `webpack src/js/entry dist/app.js --modulebind 'css=style!css'`,便可生成最終的打包文件.

運做的流程大概以下

經過入口文件entry.js加載content.js和style.css，而後把entry.js生成到dist/app.js中，在html中直接引入文件app.js便可。

附上效果圖
jquery

是否以爲上面的命令太長了，感受太土了？不用怕，那些參數咱們都是能夠經過配置文件來配置的。

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

entry:指定入口文件
output:指定輸出文件
module.loaders:指定加載器，在webpack中，能夠配置各類各樣的加載器，這樣咱們就不須要擔憂sass，less，等一些文件的編譯問題了。