【webpack】學習記錄（一）

時間 2019-11-13

標籤 webpack 學習記錄简体版

原文原文鏈接

[TOC]javascript

簡介

官網css

webpack是以模塊依賴和生成靜態資產表明這些模塊。通俗一點理解就是，把全部依賴的腳本，樣式，統一打包，減小前端請求，而且可壓縮，可混淆html

優點

支持ES6
支持AMD/CMD
插件豐富
並壓/混淆，模塊依賴
減小網絡請求，加快前端渲染
利於模塊化開發

劣勢

須要瞭解node.js
存在學習成本
不利於入門學習
debug困難

相似框架

grunt
gulp
bower
karma

入門例子

依賴node.js
依賴webpack模塊

安裝依賴

node.js 安裝

下載後執行前端

node -v

運行成功則安裝成功java

webpack 模塊依賴

npm install webpack -g

**-g**表明全局安裝node

項目下使用webpack

全部命令在項目根目錄執行webpack

初始化

npm init

執行該命令，會要求輸入一些，如項目項目名，項目描述，做者，等信息，執行完後會出現一個package.json的文件在項目的根目錄git

項目加入依賴

webpack

npm install webpack --save-dev

改命令執行後會修改package.json，在devDependencies下加入了webpackgithub

固然也能夠經過@來指定其餘版本如web

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

css-loader style-loader

讓項目支持css壓縮和樣式加載器

npm install css-loader style-loader

目錄結構

入口文件（index.html）

bundle.js 是壓縮以後的文件，是webpack自動生成，下面會說

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

業務腳本（content.js）

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

樣式腳本（style.css）

body {
    background: yellow;
}

入口腳本（entry.js）

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

webpack配置（webpack.config.js）

module.exports = {
    //入口腳本
    entry: "./src/modules/main/scripts/entry.js",
    //輸出
    output: {
        //輸出目錄
        path: './src/modules/main/scripts',
        //輸出腳本
        filename: "bundle.js"
    },
    module: {
        //壓縮器
        loaders: [
            //css後綴的，採用style!css壓縮器
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};