webpack學習

luckyyulin 發布于2019-08-26 11:55 / 770人閱讀

摘要：全局安裝安裝現在我們就可以全局的使用命令了中基礎的命令這個命令是將打包成，然后只需要引用該文件就可以了看如下這是簡單的代碼。

全局安裝安裝webapck

npm i webpack -g

現在我們就可以全局的使用webpack命令了

webpack中基礎的命令：

webpack enter.js output.js --watch

這個命令是將enter.js打包成output.js，然后html只需要引用該文件就可以了
看如下entry.js,這是簡單的js代碼。

// 這邊是處理js邏輯
let people = require("./people")
let $ = require("jquery")

$.each(people, function(key, value){
    $("body").append(""+people[key].name+"")
})

那么如何來打包css文件呢，只需要將css也引入到enter.js即可，這樣跟文件index.html還是只需要引用output.js即可
引入css需要幾個插件；css-loader， style-loader（由于是靜態文件，需要編譯）

require("!style-loader!css-loader!./style.css")

以上為簡單的打包；如果需要復雜的工程的話，webpack推薦使用配置文件來配置
webpack的配置文件必須是webpack.config.js
上面的配置只需要這樣寫

module.exports = {
    // 入口文件
    entry: "./app.js",
    // 出口文件
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    // 需要依賴的插件或裝載器
    mudule: {
        loader: [
            {
                test: /.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    }
}

以下是一個簡易的開發目錄

針對該目錄配置文件如下
ps: 需要將es6轉碼需要安裝 babel-core,babel-loader,babel-env,babel-preset-es2015

module.exports = {
    // 入口文件
    entry: ".src/js/app.js",
    // 出口文件
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    // 需要依賴的插件或裝載器
    mudule: {
        loader: [
            // css加載
            {
                test: /.css$/,
                loader: "style-loader!css-loader"
            },
            // es6轉碼為es2015
            {
                test: /.js/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015"]  // ps這一塊也可以寫在.babelrc文件下
                },
                exclude: /node_modules/
            }
        ]
    },
    // 自動生成html文件，會引入js
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: "./index.html"})
    ]
}

GPU云服務器云服務器 webpack _webpack webpack cdn webpack2

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

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

webpack入門學習手記（一）

摘要：爭取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。待續相關文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四本人微信公眾號：前端修煉之路，歡迎關注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過gulp、grunt，但是一直沒有學習過webpack。這兩天剛好有時間，學習了下...

mengera88 2019-08-23 14:01 評論0 收藏0
webpack 學習筆記（一）

摘要：引言最近在學習，發現好多知識點，之前一點都沒有接觸過，如等等。使用本地安裝，會存于文件夾內與屬性內，更方便項目文件遷移以及協同開發等情況。引言最近在學習webpack，發現好多知識點，之前一點都沒有接觸過，如babel、core-js、browserslist等等。以前習慣了使用cli構建項目，很多東西不用考慮，拿來就用，這樣的碼農是不會有能力提升的，必須了解更多的知識點，才能成為...

zhangwang 2019-08-26 10:36 評論0 收藏0
webpack入門學習手記（二）

摘要：例如現在的入門學習手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學習手記一，主要是介紹了的核心概念，是整個學習過程的基礎知識。新生成的類似如下入門學習手記因為生成的內容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號：前端修煉之路，歡迎關注。最近開始想要維護一個個人的公眾...

Joyven 2019-08-23 14:05 評論0 收藏0
我的webpack學習筆記（一）

摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用，該如何去通過打包。前言在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。 *創建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

wh469012917 2019-08-21 11:48 評論0 收藏0
我的webpack學習筆記（一）

摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用，該如何去通過打包。前言在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。 *創建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

CrazyCodes 2019-08-29 12:54 評論0 收藏0