前端構建工具 -- Webpack

ningwang 發布于2019-08-22 16:46 / 3498人閱讀

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

前言

scss（sass）、less是css的預處理語言，采用其可以得到更規范，更清晰的css代碼，typescript是javascript基礎上擴展的代碼，使我們能使用javascript不能使用的特性，并且可以轉換為js代碼

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

1、簡介

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

2、安裝Webpack

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

npm install -g webpack
npmt install -g webpack-cli

3、使用webpack打包項目入門

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

webpack --mode development

2、使用webpack打包復雜項目
首先新建一個文件夾webpack-demo,其下有文件夾css和js,css文件夾里有
創建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

新建一個webpack.config.js文件進行打包配置：

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進行打包webpack
注：如果運行提示 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)

GPU云服務器云服務器前端構建構建工具 android構建工具自動化構建工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94654.html

【前端構建】WebPack實例與前端性能優化

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

QiShare 2019-08-19 17:48 評論0 收藏0
Javascript五十問——從源頭細說Webpack與Gulp

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

lwx12525 2019-08-23 14:47 評論0 收藏0
前端模塊化和構建工具

摘要：以前一直對前端構建工具的理解不深，經過幾天的研究特意來總結一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內容，如果有冒犯之處，請指出。強大的設計使得它更像是一個構建平臺，而不只是一個打包工具。以前一直對前端構建工具的理解不深，經過幾天的研究特意來總結一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內容，如果有冒犯之處，請指出。如今，網頁不再...

ad6623 2019-08-20 18:37 評論0 收藏0
前端通用國際化解決方案

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

lingdududu 2019-08-20 15:46 評論0 收藏0
如何打造一個令人愉悅的前端開發環境（一）

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

KavenFan 2019-08-02 16:21 評論0 收藏0