成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端構(gòu)建工具 -- Webpack

ningwang / 3506人閱讀

摘要：我們需要在文件里，通過的方式來引入，我們來看具體的方法，首先需要安裝，安裝的目的是為了在中以的方式嵌入

前言

scss（sass）、less是css的預(yù)處理語言，采用其可以得到更規(guī)范，更清晰的css代碼，typescript是javascript基礎(chǔ)上擴(kuò)展的代碼，使我們能使用javascript不能使用的特性，并且可以轉(zhuǎn)換為js代碼

但這些語言編寫的代碼都需進(jìn)行處理才能變成瀏覽器能識(shí)別的代碼，手動(dòng)處理又太過繁瑣，所以使用webpack等自動(dòng)打包工具就比較方便

1、簡介

Webpack : 是前端打包工具，它從主文件（如index.html）開始，檢查其依賴的模塊文件，并將其中JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等）進(jìn)行轉(zhuǎn)換和打包成為一個(gè)（或多個(gè)）js文件
Grunt/Guip : 優(yōu)化前端開發(fā)流程的工具，在一個(gè)配置文件中設(shè)置指定文件的編譯，組合，壓縮等任務(wù)的具體步驟，工具自動(dòng)完成該任務(wù)

2、安裝Webpack

使用npm安裝webpack模塊，在webpack 3中，webpack本身和它的CLI以前都是在同一個(gè)包中，但在第4版中，他們已經(jīng)將兩者分開來更好地管理它們,所以在webpack 4中需要先全局安裝webpack和webpack-cli。
使用npm安裝webpack模塊:

npm install -g webpack
npmt install -g webpack-cli
3、使用webpack打包項(xiàng)目入門

1、使用終端用webpack打包簡單文件
webpack 4不能使用webpack 入口文件 出個(gè)文件 進(jìn)行打包了，它的打包方式為默認(rèn)入口文件是src目錄下的Index.js文件，目的文件是dist目錄下的main.js文件，打包命令行是,執(zhí)行該命令行之后就能在dist目錄下出現(xiàn)打包完成的文件main.js

webpack --mode development

2、使用webpack打包復(fù)雜項(xiàng)目
首先新建一個(gè)文件夾webpack-demo,其下有文件夾css和js,css文件夾里有
創(chuàng)建package.json : npm install
安裝依賴包：

npm install webpack --save-dev
npm install jquery --save-dev
npm install style-loader css-loader --save-dev 
npm install extract-text-webpack-plugin –-save-dev

新建一個(gè)webpack.config.js文件進(jìn)行打包配置：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry:"./js/main.js",
    output: {
        path: "/dist",
        filename: "bundle.js"
    },

    plugins: [
        new ExtractTextPlugin ("./style.css")
    ],

    module: {
        rules: [
            {
                test: /.css$/,
                loader:ExtractTextPlugin.extract("style-loader","css-loader")
            }
        ]
    }
};

注：在webpack v2 之后loaders都用rules替代了
使用webpack進(jìn)行打包webpack
注：如果運(yùn)行提示 command not found可以這么操作node_modules/.bin/webpack
自定義shell命令來操作的。$ alias lwebpack="node_modules/.bin/webpack"

我們需要在js文件里，通過require的方式來引入css，我們來看具體的方法，首先需要安裝css-loader，
style-loader(安裝style-loader的目的是為了在html中以style的方式嵌入css)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94654.html

相關(guān)文章

  • 【前端構(gòu)建】WebPack實(shí)例與前端性能優(yōu)化

    摘要：感受構(gòu)建工具給前端優(yōu)化工作帶來的便利。多多益處邏輯清晰，程序注重?cái)?shù)據(jù)與表現(xiàn)分離，可讀性強(qiáng)，利于規(guī)避和排查問題構(gòu)建工具層出不窮。其實(shí)工具都能滿足需求，關(guān)鍵是看怎么用，工具的使用背后是對(duì)前端性能優(yōu)化的理解程度。 這篇主要介紹一下我在玩Webpack過程中的心得。通過實(shí)例介紹WebPack的安裝，插件使用及加載策略。感受構(gòu)建工具給前端優(yōu)化工作帶來的便利。 showImg(https://se...

    QiShare 評(píng)論0 收藏0

  • Javascript五十問——從源頭細(xì)說Webpack與Gulp

    摘要：前言與是目前圈子內(nèi)比較活躍的前端構(gòu)建工具。對(duì)于初學(xué)者來說，對(duì)這二者往往容易認(rèn)識(shí)不清，今天，就從事件的源頭，說清楚與。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。打包后形成的文件出口。 前言：Webpack 與 gulp是目前圈子內(nèi)比較活躍的前端構(gòu)建工具。網(wǎng)上有很多二者比較的文章，面試中也會(huì)經(jīng)常遇到gulp，Webpack的區(qū)別這樣的問題。對(duì)于初學(xué)者來說，對(duì)這二...

    lwx12525 評(píng)論0 收藏0

  • 前端模塊化和構(gòu)建工具

    摘要：以前一直對(duì)前端構(gòu)建工具的理解不深，經(jīng)過幾天的研究特意來總結(jié)一下，第一次寫博客，有寫錯(cuò)的請多多見諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請指出。強(qiáng)大的設(shè)計(jì)使得它更像是一個(gè)構(gòu)建平臺(tái)，而不只是一個(gè)打包工具。 以前一直對(duì)前端構(gòu)建工具的理解不深，經(jīng)過幾天的研究特意來總結(jié)一下，第一次寫博客，有寫錯(cuò)的請多多見諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請指出。 如今，網(wǎng)頁不再...

    ad6623 評(píng)論0 收藏0

  • 前端通用國際化解決方案

    摘要：前端通用國際化解決方案背景前端技術(shù)日新月異，技術(shù)棧繁多。接下來針對(duì)這幾塊內(nèi)容并結(jié)合日常的開發(fā)流程說明國際化的通用解決方案。 文章首發(fā)于個(gè)人blog，歡迎大家關(guān)注。 DI18n 前端通用國際化解決方案 背景 前端技術(shù)日新月異，技術(shù)棧繁多。以前端框架來說有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等構(gòu)建工具去滿足日常的開...

    lingdududu 評(píng)論0 收藏0

  • 如何打造一個(gè)令人愉悅的前端開發(fā)環(huán)境（一）

    摘要：我覺得這方面的原因是當(dāng)時(shí)對(duì)和的依賴，導(dǎo)致大家對(duì)的興趣不弄，錯(cuò)過了最佳時(shí)機(jī)，這個(gè)其實(shí)跟百度自己的的技術(shù)棧有很大關(guān)系。這個(gè)阮一峰對(duì)于前端構(gòu)建的變化吐槽過，說新的構(gòu)建工具就是的構(gòu)建工具。 文章來源 最近幾年，前端發(fā)展越來越迅速，各種萌新加入了前端這個(gè)大家庭，大有趕IOS、超Android的趨勢呀！同時(shí)，萌新們提出了各種前端工作問題，除了最基礎(chǔ)的html、css、js三板斧之外，最讓人頭疼的應(yīng)...

    KavenFan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<